html - 宽度为100％的HTML表格，在tbody中有垂直滚动(HTML table with 100% width, with vertical scroll inside tbody)

Question

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

  ask by Marko S translate from so

Answer 1

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