html - 具有 100% 宽度的HTML表格,tbody内带有垂直滚动

如何为

vertical scroll inside tbody

html :


<table>
<thead>
<tr>
 <th>Head 1</th>
 <th>Head 2</th>
 <th>Head 3</th>
 <th>Head 4</th>
 <th>Head 5</th>
</tr>
</thead>
<tbody>
<tr>
 <td>Content 1</td>
 <td>Content 2</td>
 <td>Content 3</td>
 <td>Content 4</td>
 <td>Content 5</td>
</tr>
</tbody>
</table>

css :


table {
 width: 100%;
 display:block;
}
thead {
 display: inline-block;
 width: 100%;
 height: 20px;
}
tbody {
 height: 200px;
 display: inline-block;
 width: 100%;
 overflow: auto;
}

时间:

在以下解决方案中,table占用父容器的100-,不需要绝对大小,

enter image description here

HTML (缩短):


<div class="table-container">
 <table>
 <thead>
 <tr>
 <th>head1</th>
 <th>head2</th>
 <th>head3</th>
 <th>head4</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td>content1</td>
 <td>content2</td>
 <td>content3</td>
 <td>content4</td>
 </tr>
 <tr>
 <td>content1</td>
 <td>content2</td>
 <td>content3</td>
 <td>content4</td>
 </tr>
 ...
 </tbody>
 </table>
</div>

CSS,为了清楚起见省略了一些修饰:


.table-container {
 height: 10em;
}
table {
 display: flex;
 flex-flow: column;
 height: 100%;
 width: 100%;
}
table thead {
 /* head takes the height it requires, 
 and it's not scaled when table is resized */
 flex: 0 0 auto;
 width: calc(100% - 0.9em);
}
table tbody {
 /* body takes all the remaining available space */
 flex: 1 1 auto;
 display: block;
 overflow-y: scroll;
}
table tbody tr {
 width: 100%;
}
table thead, table tbody tr {
 display: table;
 table-layout: fixed;
}

jsfiddle的完整代码


@scrollbar-width: 0.9em;
.table-scrollable() {
 display: flex;
 flex-flow: column;

 thead,
 tbody tr {
 display: table;
 table-layout: fixed;
 }

 thead {
 flex: 0 0 auto;
 width: ~"calc(100% - @{scrollbar-width})";
 }

 tbody {
 display: block;
 flex: 1 1 auto;
 overflow-y: scroll;

 tr {
 width: 100%;
 }
 }
}

尝试下面的方法,非常简单易于实现

下面是jsfiddle链接

http://jsfiddle.net/v2t2k8ke/2/

html :


<table border='1' id='tbl_cnt'>
<thead><tr></tr></thead><tbody></tbody>

css :


 #tbl_cnt{
 border-collapse: collapse; width: 100%;word-break:break-all;
 }
 #tbl_cnt thead, #tbl_cnt tbody{
 display: block;
 }
 #tbl_cnt thead tr{
 background-color: #8C8787; text-align: center;width:100%;display:block;
 }
 #tbl_cnt tbody {
 height: 100px;overflow-y: auto;overflow-x: hidden;
 }

jQuery:


 var data = [
 {
"status":"moving","vehno":"tr544","loc":"bng","dri":"ttt"
 }, {
"status":"stop","vehno":"tr54","loc":"che","dri":"ttt"
 },{"status":"idle","vehno":"yy5499999999999994","loc":"bng","dri":"ttt"
 },{
"status":"moving","vehno":"tr544","loc":"bng","dri":"ttt"
 }, {
"status":"stop","vehno":"tr54","loc":"che","dri":"ttt"
 },{
"status":"idle","vehno":"yy544","loc":"bng","dri":"ttt"
 }
 ];
 var sth = '';
 $.each(data[0], function (key, value) {
 sth += '<td>' + key + '</td>';
 });
 var stb = ''; 
 $.each(data, function (key, value) {
 stb += '<tr>';
 $.each(value, function (key, value) {
 stb += '<td>' + value + '</td>';
 });
 stb += '</tr>';
 });
 $('#tbl_cnt thead tr').append(sth);
 $('#tbl_cnt tbody').append(stb);
 setTimeout(function () {
 var col_cnt=0 
 $.each(data[0], function (key, value) {col_cnt++;}); 
 $('#tbl_cnt thead tr').css('width', ($("#tbl_cnt tbody") [0].scrollWidth)+ 'px');
 $('#tbl_cnt thead tr td,#tbl_cnt tbody tr td').css('width', ($('#tbl_cnt thead tr ').width()/Number(col_cnt)) + 'px');}, 100)

我正在使用 display:block 进行线程和 tbody 。 因为螺纹柱的宽度与tbody列的宽度不同。

table {margin:0 auto; border-collapse:collapse;} thead {background:#CCCCCC;display:block} tbody {height:10em;overflow-y:scroll;display:block}

为了解决这个问题,我使用了小的jQuery代码,但它只能用JavaScript完成。


var colNumber=3//number of table columns 

for (var i=0; i<colNumber; i++)
 {
 var thWidth=$("#myTable").find("th:eq("+i+")").width();
 var tdWidth=$("#myTable").find("td:eq("+i+")").width(); 
 if (thWidth<tdWidth) 
 $("#myTable").find("th:eq("+i+")").width(tdWidth);
 else
 $("#myTable").find("td:eq("+i+")").width(thWidth); 
 } 

下面是我的工作演示: http://jsfiddle.net/gavroche/N7LEF/

在 IE 8中不起作用


var colNumber=3//number of table columns


for (var i=0; i<colNumber; i++)
 {
 var thWidth=$("#myTable").find("th:eq("+i+")").width();
 var tdWidth=$("#myTable").find("td:eq("+i+")").width(); 
 if (thWidth<tdWidth) 
 $("#myTable").find("th:eq("+i+")").width(tdWidth);
 else
 $("#myTable").find("td:eq("+i+")").width(thWidth); 
 } 

 table {margin:0 auto; border-collapse:separate;}
 thead {background:#CCCCCC;display:block}
 tbody {height:10em;overflow-y:scroll;display:block}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="myTable" border="1">
 <thead>
 <tr>
 <th>A really Very Long Header Text</th>
 <th>Normal Header</th>
 <th>Short</th> 
 </tr> 
 </thead>
 <tbody>
 <tr>
 <td>
 Text shorter than header
 </td>
 <td>
 Text is longer than header
 </td>
 <td>
 Exact
 </td>
 </tr>
 <tr>
 <td>
 Text shorter than header
 </td>
 <td>
 Text is longer than header
 </td>
 <td>
 Exact
 </td>
 </tr>
 <tr>
 <td>
 Text shorter than header
 </td>
 <td>
 Text is longer than header
 </td>
 <td>
 Exact
 </td>
 </tr>
 <tr>
 <td>
 Text shorter than header
 </td>
 <td>
 Text is longer than header
 </td>
 <td>
 Exact
 </td>
 </tr>
 <tr>
 <td>
 Text shorter than header
 </td>
 <td>
 Text is longer than header
 </td>
 <td>
 Exact
 </td>
 </tr>
 <tr>
 <td>
 Text shorter than header
 </td>
 <td>
 Text is longer than header
 </td>
 <td>
 Exact
 </td>
 </tr>
 <tr>
 <td>
 Text shorter than header
 </td>
 <td>
 Text is longer than header
 </td>
 <td>
 Exact
 </td>
 </tr>
 <tr>
 <td>
 Text shorter than header
 </td>
 <td>
 Text is longer than header
 </td>
 <td>
 Exact
 </td>
 </tr>
 <tr>
 <td>
 Text shorter than header
 </td>
 <td>
 Text is longer than header
 </td>
 <td>
 Exact
 </td>
 </tr>
 <tr>
 <td>
 Text shorter than header
 </td>
 <td>
 Text is longer than header
 </td>
 <td>
 Exact
 </td>
 </tr>
 <tr>
 <td>
 Text shorter than header
 </td>
 <td>
 Text is longer than header
 </td>
 <td>
 Exact
 </td>
 </tr>
 </tbody>
</table>

这个解决方案仍然需要由jQuery计算和设置th宽度


table.scroll tbody,
table.scroll thead { display: block; }

table.scroll tbody {
 overflow-y: auto;
 overflow-x: hidden;
 max-height: 300px;
}

table.scroll tr {
 display: flex;
}

table.scroll tr > td {
 flex-grow: 1;
 flex-basis: 0;
}

Jquery /Javascript


var $table = $('#the_table_element'),
 $bodyCells = $table.find('tbody tr:first').children(),
 colWidth;

$table.addClass('scroll');

// Adjust the width of thead cells when window resizes
$(window).resize(function () {

 // Get the tbody columns width array
 colWidth = $bodyCells.map(function () {
 return $(this).width();
 }).get();

 // Set the width of thead columns
 $table.find('thead tr').children().each(function (i, v) {
 $(v).width(colWidth[i]);
 });

}).resize(); // Trigger resize handler

...