本文翻译自：HTML table with 100% width, with vertical scroll inside tbody

How can I set for <table> 100% width and put only inside <tbody> vertical scroll for some height? 如何设置<table> 100％宽度并仅在<tbody>垂直滚动内放置一些高度？

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

 <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>

I want to avoid adding some additional div, all I want is simple table like this and when I trying to change display, table-layout , position and much more things in CSS table not working good with 100% width only with fixed width in px. 我想避免添加一些额外的div，我想要的只是这样的简单表格，当我试图改变显示， table-layout ， position和CSS表格中的更多东西不能正常工作100％宽度只有固定宽度在px 。

#1楼

参考：https://stackoom.com/question/19byw/宽度为-的HTML表格-在tbody中有垂直滚动

#2楼

In order to make <tbody> element scrollable, we need to change the way it's displayed on the page ie using display: block; 为了使<tbody>元素可滚动，我们需要改变它在页面上显示的方式，即使用display: block; to display that as a block level element. 将其显示为块级元素。

Since we change the display property of tbody , we should change that property for thead element as well to prevent from breaking the table layout. 由于我们更改了tbody的display属性，因此我们应该更改thead元素的属性，以防止破坏表格布局。

So we have: 所以我们有：

thead, tbody { display: block; }tbody {height: 100px;       /* Just for the demo          */overflow-y: auto;    /* Trigger vertical scroll    */overflow-x: hidden;  /* Hide the horizontal scroll */
}

Web browsers display the thead and tbody elements as row-group ( table-header-group and table-row-group ) by default. Web浏览器tbody将thead和tbody元素显示为行组（ table-header-group和table-row-group ）。

Once we change that, the inside tr elements doesn't fill the entire space of their container. 一旦我们改变它，内部tr元素不会填充其容器的整个空间。

In order to fix that, we have to calculate the width of tbody columns and apply the corresponding value to the thead columns via JavaScript. 为了解决这个问题，我们必须计算tbody列的宽度，并通过JavaScript将相应的值应用于thead列。

Auto Width Columns 自动宽度列

Here is the jQuery version of above logic: 这是上面逻辑的jQuery版本：

// Change the selector if needed
var $table = $('table'),$bodyCells = $table.find('tbody tr:first').children(),colWidth;// 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]);
});

And here is the output (on Windows 7 Chrome 32) : 这是输出（在Windows 7 Chrome 32上） ：

WORKING DEMO . 工作演示 。

Full Width Table, Relative Width Columns 全宽表，相对宽度列

As the Original Poster needed, we could expand the table to 100% of width of its container, and then using a relative ( Percentage ) width for each columns of the table. 正如原始海报所需，我们可以将table扩展到其容器width的100％，然后使用表的每列的相对（ 百分比 ） width 。

table {width: 100%; /* Optional */
}tbody td, thead th {width: 20%;  /* Optional */
}

Since the table has a (sort of) fluid layout , we should adjust the width of thead columns when the container resizes. 由于表格具有（某种） 流体布局 ，因此我们应该在容器调整大小时调整thead列的宽度。

Hence we should set the columns' widths once the window is resized: 因此，一旦调整窗口大小，我们应该设置列的宽度：

// Adjust the width of thead cells when *window* resizes
$(window).resize(function() {/* Same as before */
}).resize(); // Trigger the resize handler once the script runs

The output would be: 输出将是：

WORKING DEMO . 工作演示 。

Browser Support and Alternatives 浏览器支持和替代方案

I've tested the two above methods on Windows 7 via the new versions of major Web Browsers (including IE10+) and it worked. 我已经通过新版本的主要Web浏览器（包括IE10 +）在Windows 7上测试了上述两种方法，并且它有效。

However, it doesn't work properly on IE9 and below. 但是，它不工作正常上IE9及以下。

That's because in a table layout , all elements should follow the same structural properties. 那是因为在表格布局中，所有元素都应遵循相同的结构属性。

By using display: block; 通过使用display: block; for the <thead> and <tbody> elements, we've broken the table structure. 对于<thead>和<tbody>元素，我们打破了表结构。

Redesign layout via JavaScript 通过JavaScript重新设计布局

One approach is to redesign the (entire) table layout. 一种方法是重新设计（整个）表格布局。 Using JavaScript to create a new layout on the fly and handle and/or adjust the widths/heights of the cells dynamically. 使用JavaScript动态创建新布局并动态处理和/或调整单元格的宽度/高度。

For instance, take a look at the following examples: 例如，看看以下示例：

jQuery .floatThead() plugin (a floating/locked/sticky table header plugin) jQuery .floatThead（）插件（浮动/锁定/粘性表头插件）
jQuery Scrollable Table plugin. jQuery Scrollable Table插件。 ( source code on github) （github上的源代码）
jQuery .FixedHeaderTable() plugin ( source code on github) jQuery .FixedHeaderTable（）插件（github上的源代码）
DataTables vertical scrolling example. DataTables 垂直滚动示例。

Nesting tables 嵌套表

This approach uses two nested tables with a containing div. 此方法使用两个嵌套表，其中包含div。 The first table has only one cell which has a div , and the second table is placed inside that div element. 第一个table只有一个有div单元格，第二个表放在div元素内。

Check the Vertical scrolling tables at CSS Play . 检查CSS Play上的垂直滚动表。

This works on most of web browsers. 这适用于大多数Web浏览器。 We can also do the above logic dynamically via JavaScript. 我们也可以通过JavaScript动态地完成上述逻辑。

Table with fixed header on scroll 滚动固定标题表

Since the purpose of adding vertical scroll bar to the <tbody> is displaying the table header at the top of each row, we could position the thead element to stay fixed at the top of the screen instead. 由于向<tbody>添加垂直滚动条的目的是在每行的顶部显示表头，我们可以将thead元素定位为保持fixed在屏幕顶部。

Here is a Working Demo of this approach performed by Julien . 这是Julien执行的这种方法的工作演示 。
It has a promising web browser support. 它有一个很有前途的Web浏览器支持。

And here a pure CSS implementation by Willem Van Bockstal . 这里是Willem Van Bockstal的纯CSS实现。

The Pure CSS Solution 纯CSS解决方案

Here is the old answer. 这是旧答案。 Of course I've added a new method and refined the CSS declarations. 当然我添加了一个新方法并改进了CSS声明。

Table with Fixed Width 固定宽度的表

In this case, the table should have a fixed width (including the sum of columns' widths and the width of vertical scroll-bar) . 在这种情况下， table应具有固定的width （包括列的宽度和垂直滚动条的宽度之和） 。

Each column should have a specific width and the last column of thead element needs a greater width which equals to the others' width + the width of vertical scroll-bar. 每列应具有特定宽度，并且thead元素的最后一列需要更大的宽度，该宽度等于其他列的宽度 +垂直滚动条的宽度。

Therefore, the CSS would be: 因此，CSS将是：

table {width: 716px; /* 140px * 5 column + 16px scrollbar width */border-spacing: 0;
}tbody, thead tr { display: block; }tbody {height: 100px;overflow-y: auto;overflow-x: hidden;
}tbody td, thead th {width: 140px;
}thead th:last-child {width: 156px; /* 140px + 16px scrollbar width */
}

Here is the output: 这是输出：

WORKING DEMO . 工作演示 。

Table with 100% Width 表100％宽度

In this approach, the table has a width of 100% and for each th and td , the value of width property should be less than 100% / number of cols . 在这种方法中， table的宽度为100% ，对于每个th和td ， width属性的值应小于100% / number of cols 。

Also, we need to reduce the width of thead as value of the width of vertical scroll-bar. 此外，我们需要将thead的宽度减小为垂直滚动条宽度的值。

In order to do that, we need to use CSS3 calc() function, as follows: 为了做到这一点，我们需要使用CSS3 calc()函数，如下所示：

table {width: 100%;border-spacing: 0;
}thead, tbody, tr, th, td { display: block; }thead tr {/* fallback */width: 97%;/* minus scroll bar width */width: -webkit-calc(100% - 16px);width:    -moz-calc(100% - 16px);width:         calc(100% - 16px);
}tr:after {  /* clearing float */content: ' ';display: block;visibility: hidden;clear: both;
}tbody {height: 100px;overflow-y: auto;overflow-x: hidden;
}tbody td, thead th {width: 19%;  /* 19% is less than (100% / 5 cols) = 20% */float: left;
}

Here is the Online Demo . 这是在线演示。

Note: This approach will fail if the content of each column breaks the line, ie the content of each cell should be short enough . 注意：如果每列的内容打破了这一行，这种方法将失败，即每个单元格的内容应足够短 。

In the following, there are two simple example of pure CSS solution which I created at the time I answered this question. 在下面，有两个简单的纯CSS解决方案示例，我在回答这个问题时创建了它。

Here is the jsFiddle Demo v2 . 这是jsFiddle演示版v2 。

Old version: jsFiddle Demo v1 旧版本： jsFiddle演示版 v1

#3楼

I'm using display:block for thead and tbody . 我正在使用display:block为thead和tbody 。 Because of that the width of the thead columns is different from the width of the tbody columns. 因此， thead列的宽度不同于tbody列的宽度。

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

To fix this I use small jQuery code but it can be done in JavaScript only. 为了解决这个问题，我使用了小的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);
}

Here is my working demo: http://jsfiddle.net/gavroche/N7LEF/ 这是我的工作演示： http ： //jsfiddle.net/gavroche/N7LEF/

Does not work in IE 8 在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>

#4楼

I got it finally right with pure CSS by following these instructions: 按照以下说明，我最终使用纯CSS得到了它：

http://tjvantoll.com/2012/11/10/creating-cross-browser-scrollable-tbody/ http://tjvantoll.com/2012/11/10/creating-cross-browser-scrollable-tbody/

The first step is to set the <tbody> to display: block so an overflow and height can be applied. 第一步是将<tbody>设置为display：block，以便可以应用溢出和高度。 From there the rows in the <thead> need to be set to position: relative and display: block so that they'll sit on top of the now scrollable <tbody> . 从那里， <thead>的行需要设置为position：relative和display：block，以便它们位于现在可滚动的<tbody>之上。

tbody, thead { display: block; overflow-y: auto; }

Because the <thead> is relatively positioned each table cell needs an explicit width 因为<thead>相对定位，所以每个表格单元格需要明确的宽度

td:nth-child(1), th:nth-child(1) { width: 100px; }
td:nth-child(2), th:nth-child(2) { width: 100px; }
td:nth-child(3), th:nth-child(3) { width: 100px; }

But unfortunately that is not enough. 但不幸的是，这还不够。 When a scrollbar is present browsers allocate space for it, therefore, the <tbody> ends up having less space available than the <thead> . 当存在滚动条时，浏览器为其分配空间，因此， <tbody>最终具有比<thead>更少的可用空间。 Notice the slight misalignment this creates... 注意这会造成轻微的错位......

The only workaround I could come up with was to set a min-width on all columns except the last one. 我能想到的唯一解决方法是在除最后一列之外的所有列上设置最小宽度。

td:nth-child(1), th:nth-child(1) { min-width: 100px; }
td:nth-child(2), th:nth-child(2) { min-width: 100px; }
td:nth-child(3), th:nth-child(3) { width: 100px; }

Whole codepen example below: 整个codepen示例如下：

CSS: CSS：

.fixed_headers {width: 750px;table-layout: fixed;border-collapse: collapse;
}
.fixed_headers th {text-decoration: underline;
}
.fixed_headers th,
.fixed_headers td {padding: 5px;text-align: left;
}
.fixed_headers td:nth-child(1),
.fixed_headers th:nth-child(1) {min-width: 200px;
}
.fixed_headers td:nth-child(2),
.fixed_headers th:nth-child(2) {min-width: 200px;
}
.fixed_headers td:nth-child(3),
.fixed_headers th:nth-child(3) {width: 350px;
}
.fixed_headers thead {background-color: #333333;color: #fdfdfd;
}
.fixed_headers thead tr {display: block;position: relative;
}
.fixed_headers tbody {display: block;overflow: auto;width: 100%;height: 300px;
}
.fixed_headers tbody tr:nth-child(even) {background-color: #dddddd;
}
.old_ie_wrapper {height: 300px;width: 750px;overflow-x: hidden;overflow-y: auto;
}
.old_ie_wrapper tbody {height: auto;
}

Html: HTML：

<!-- IE < 10 does not like giving a tbody a height.  The workaround here applies the scrolling to a wrapped <div>. -->
<!--[if lte IE 9]>
<div class="old_ie_wrapper">
<!--<![endif]--><table class="fixed_headers"><thead><tr><th>Name</th><th>Color</th><th>Description</th></tr></thead><tbody><tr><td>Apple</td><td>Red</td><td>These are red.</td></tr><tr><td>Pear</td><td>Green</td><td>These are green.</td></tr><tr><td>Grape</td><td>Purple / Green</td><td>These are purple and green.</td></tr><tr><td>Orange</td><td>Orange</td><td>These are orange.</td></tr><tr><td>Banana</td><td>Yellow</td><td>These are yellow.</td></tr><tr><td>Kiwi</td><td>Green</td><td>These are green.</td></tr><tr><td>Plum</td><td>Purple</td><td>These are Purple</td></tr><tr><td>Watermelon</td><td>Red</td><td>These are red.</td></tr><tr><td>Tomato</td><td>Red</td><td>These are red.</td></tr><tr><td>Cherry</td><td>Red</td><td>These are red.</td></tr><tr><td>Cantelope</td><td>Orange</td><td>These are orange inside.</td></tr><tr><td>Honeydew</td><td>Green</td><td>These are green inside.</td></tr><tr><td>Papaya</td><td>Green</td><td>These are green.</td></tr><tr><td>Raspberry</td><td>Red</td><td>These are red.</td></tr><tr><td>Blueberry</td><td>Blue</td><td>These are blue.</td></tr><tr><td>Mango</td><td>Orange</td><td>These are orange.</td></tr><tr><td>Passion Fruit</td><td>Green</td><td>These are green.</td></tr></tbody>
</table><!--[if lte IE 9]>
</div>
<!--<![endif]-->

EDIT: Alternative solution for table width 100% (above actually is for fixed width and didn't answer the question): 编辑：表宽100％的替代解决方案（实际上是固定宽度，并没有回答问题）：

HTML: HTML：

<table><thead><tr><th>Name</th><th>Color</th><th>Description</th></tr></thead><tbody><tr><td>Apple</td><td>Red</td><td>These are red.</td></tr><tr><td>Pear</td><td>Green</td><td>These are green.</td></tr><tr><td>Grape</td><td>Purple / Green</td><td>These are purple and green.</td></tr><tr><td>Orange</td><td>Orange</td><td>These are orange.</td></tr><tr><td>Banana</td><td>Yellow</td><td>These are yellow.</td></tr><tr><td>Kiwi</td><td>Green</td><td>These are green.</td></tr></tbody>
</table>

CSS: CSS：

table {width: 100%;text-align: left;min-width: 610px;
}
tr {height: 30px;padding-top: 10px
}
tbody { height: 150px; overflow-y: auto;overflow-x: hidden;
}
th,td,tr,thead,tbody { display: block; }
td,th { float: left; }
td:nth-child(1),
th:nth-child(1) {width: 20%;
}
td:nth-child(2),
th:nth-child(2) {width: 20%;float: left;
}
td:nth-child(3),
th:nth-child(3) {width: 59%;float: left;
}
/* some colors */
thead {background-color: #333333;color: #fdfdfd;
}
table tbody tr:nth-child(even) {background-color: #dddddd;
}

Demo: http://codepen.io/anon/pen/bNJeLO 演示： http ： //codepen.io/anon/pen/bNJeLO

#5楼

Css workaround for forcing columns to display correctly with a 'block' tbody Css解决方法强制列使用'block'tbody正确显示

This solution still requires the th widths to be calculated and set by jQuery 此解决方案仍然需要通过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;
}

And the Jquery / Javascript 和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 arraycolWidth = $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

#6楼

try below approach, very simple easy to implement 尝试下面的方法， 非常简单易于实现

Below is the jsfiddle link 下面是jsfiddle链接

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

HTML: HTML：

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

CSS: 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: 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)

宽度为100％的HTML表格，在tbody中有垂直滚动相关推荐

合并excel文件 C语言,再见Ctrl + C！合并100个Excel表格，只需30秒！
原标题:再见Ctrl + C!合并100个Excel表格,只需30秒! 哈喽,大家好!在上篇文章< 你复制粘贴的那么认真,难怪天天加班[Excel教程] >中,我们给大家介绍了4种拆分工作 ...
img标签设置display:block，宽度无法100%
img标签设置display:block,宽度无法100% 一些个人总结,第一次发文章,有什么不足的地方,还请各位多提意见现象如下代码,img标签设置了display:block,尺寸宽度无法设定 ...
vue tinymce富文本设置图片宽度最大100%
vue tinymce富文本设置图片宽度最大100% 一.效果没有加样式前的图片显示加了之后二.实现方法控件配置中添加自定义内容样式 //自定义样式 defaultSetting: {con ...
html实现文字在表格上方左侧,html实现固定表格四周并且可以上下左右滚动
这篇文章主要为大家详细介绍了固定表格四周实现表格上下左右滚动的解决方法,表格上下滚动时,表格头尾固定:左右滚动的时候表格,表格第一列最后一列固定,本文为大家提供了思路,感兴趣的小伙伴们可以参考一下问 ...
Latex 表格文字居中（垂直和水平居中）
Latex 表格文字居中(垂直和水平居中) 可能由于设置latex表格列宽过小导致的文字不居中(垂直和水平居中) 解决办法:采用如下改动:m代表middle,|为表格竖线,2.5cm代表列宽,< ...
html设置表格宽度最小,css如何设置表格宽度？
css设置表格宽度的方法:直接使用css设置表格table标签的width属性即可设置表格宽度,浏览器会自动按照td宽度的比例来调整td宽度. css设置表格宽度: 例1:Table的宽度为600px ...
php 导出csv设置列宽度,php数据库导出excel表格数据-php从数据库导出csv格式的Excel表格是，字段本身就......
PHP如何将查询出来的数据导出成excel表格(最好做... $objPHPExcel->getActiveSheet()->getDefaultColumnDimension(A)-&g ...
php中如何固定表格宽度,实例讲解DataTables固定表格宽度(设置横向滚动条)
当表格的列比较多的时候,可能就需要固定表格的宽度了,默认的100%宽已经不适应了.默认的100%宽要实现改变窗口大小也100%的话,在table元素上添加width="100%", ...
element 表格宽度自适应_Python如何以表格形式打印输出！
好久不见,风水轮流转,我竟然写写写python了近日有个小需求,要求收集统计一些信息上报,并直接在后台控制台打印,写入日志为了美观,需要以表格形式展现数据,形如虽说可以用 prettytable ...

宽度为100％的HTML表格，在tbody中有垂直滚动

#1楼

#2楼

Auto Width Columns 自动宽度列

Full Width Table, Relative Width Columns 全宽表，相对宽度列

Browser Support and Alternatives 浏览器支持和替代方案

Redesign layout via JavaScript 通过JavaScript重新设计布局

Nesting tables 嵌套表

Table with fixed header on scroll 滚动固定标题表

The Pure CSS Solution 纯CSS解决方案

Table with Fixed Width 固定宽度的表

Table with 100% Width 表100％宽度

#3楼

#4楼

#5楼

Css workaround for forcing columns to display correctly with a 'block' tbody Css解决方法强制列使用'block'tbody正确显示

#6楼

宽度为100％的HTML表格，在tbody中有垂直滚动相关推荐

最新文章

热门文章