cho chiều cao vào bảng và hàng trong bootstrap

Tôi đang sử dụng bootstrap 3, tôi đang cố gắng cung cấp chiều cao cho bảng và hàng nhưng không có gì là làm việc cho tôi.cho chiều cao vào bảng và hàng trong bootstrap

tôi đã thử đặt chiều cao dòng và các thuộc tính khác của bảng, làm cách nào tôi có thể tăng chiều cao?

<style> 
    div#description { 
     background-color: gray; 
     height: 25%; 
     border: 2px black; 
    } 
    tr { 
     line-height: 25px; 
    } 
    .container { 
     height: 100% 
    } 
    table { 
     height: 100% 
    } 
    #topics tr { 
     line-height: 14px; 
    } 
</style> 
</head> 

<body> 
    <div class="container"> 

     <div class="row"> 
      <div class="col-md-7 col-xs-10 pull-left"> 
       <p>Hello</p> 
       <div class="table-responsive"> 
        <table class="table table-bordered "> 
         <tbody> 
          <tr> 
           <td></td> 
           <td></td> 
           <td></td> 
           <td></td> 
           <td></td> 
          </tr> 
          <tr> 
           <td></td> 
           <td></td> 
           <td></td> 
           <td></td> 
           <td></td> 
          </tr> 
          <tr> 
           <td></td> 
           <td></td> 
           <td></td> 
           <td></td> 
           <td></td> 
          </tr> 
          <tr> 
           <td></td> 
           <td></td> 
           <td></td> 
           <td></td> 
           <td></td> 
          </tr> 
          <tr> 
           <td></td> 
           <td></td> 
           <td></td> 
           <td></td> 
           <td></td> 
          </tr> 
          <tr> 
           <td></td> 
           <td></td> 
           <td></td> 
           <td></td> 
           <td></td> 
          </tr> 
          <tr> 
           <td></td> 
           <td></td> 
           <td></td> 
           <td></td> 
           <td></td> 
          </tr> 
          <tr> 
           <td></td> 
           <td></td> 
           <td></td> 
           <td></td> 
           <td></td> 
          </tr> 


         </tbody> 
        </table> 
       </div> 


      </div> 
      <div class="col-md-5 col-xs-8 pull-right" id="description"> 
       <p>Hello2</p> 
      </div> 
     </div> 
    </div>

Nguồn

2013-12-16 anam

Bạn nên chấp nhận một câu trả lời. – gsamaras

http://jsfiddle.net/isherwood/gfgux

html, body { 
    height: 100%; 
} 
#table-row, #table-col, #table-wrapper { 
    height: 80%; 
} 

<div id="content" class="container"> 
    <div id="table-row" class="row"> 
     <div id="table-col" class="col-md-7 col-xs-10 pull-left"> 
      <p>Hello</p> 
      <div id="table-wrapper" class="table-responsive"> 
       <table class="table table-bordered ">

Nguồn

2013-12-16 14:30:43 isherwood

Đối với <tr> 's chỉ cần đặt

tr { 
    line-height: 25px; 
    min-height: 25px; 
    height: 25px; 
}

Nó hoạt động với bootstrap cũng có. Đối với chiều cao 100%, 100% phải là 100% của một cái gì đó. Do đó, bạn phải xác định chiều cao cố định cho một trong các vùng chứa hoặc phần thân. Tôi đoán bạn muốn toàn bộ trang là 100%, do đó (ví dụ):

body { 
    height: 700px; 
} 
.table100, .row, .container, .table-responsive, .table-bordered { 
    height: 100%; 
}

Một cách giải quyết không để thiết lập một chiều cao tĩnh là bằng cách buộc các chiều cao tính bằng mã theo chế độ xem:

$('body').height(document.documentElement.clientHeight);

tất cả ở trên trong fiddle này ->http://jsfiddle.net/LZuJt/

Note: tôi không quan tâm rằng bạn có 25% chiều cao trên #description, và chiều cao 100% trên bàn. Đoán nó chỉ là một ví dụ. Và lưu ý rằng clientHeight không đúng vì tài liệuElement là khung nội tuyến, nhưng bạn sẽ nhận được hình ảnh trong projekt của riêng bạn :)

Nguồn

2013-12-16 14:47:41 davidkonrad

Thay vì sử dụng js để đặt chiều cao cơ thể, bạn có thể sử dụng 100vh (vh - \t Tương ứng với 1% chiều cao của chế độ xem: https://www.w3schools.com/cssref/css_units.asp) –

Điều gì làm việc cho tôi là thêm một div xung quanh nội dung. Ban đầu tôi có cái này. Css áp dụng cho td không có hiệu lực.

 <td>   
      @Html.DisplayFor(modelItem => item.Message)   
     </td>

Sau đó, tôi quấn các nội dung trong một div và css làm việc như mong đợi

 <td> 
      <div class="largeContent"> 
       @Html.DisplayFor(modelItem => item.Message) 
      </div> 
     </td>

Nguồn

2014-02-21 16:41:47 Jobrocol

CSS:

tr { 
width: 100%; 
display: inline-table; 
height:60px;    // <-- the rows height 
} 

table{ 
height:300px;    // <-- Select the height of the table 
display: -moz-groupbox; // For firefox bad effect 
} 
tbody{ 
    overflow-y: scroll;  
    height: 200px;   // <-- Select the height of the body 
    width: 100%; 
    position: absolute; 
}

Bootply: http://www.bootply.com/AgI8LpDugl

Nguồn

2014-05-07 13:24:51 pbenard

cho chiều cao vào bảng và hàng trong bootstrap

Trả lời

Các vấn đề liên quan