HTML表格，100%宽度，正文内有垂直滚动

Question

如何设置

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>

我想避免添加一些额外的div，我想要的只是这样的简单表格，当我试图更改显示时，表格布局，位置以及CSS表格中的更多内容在px中仅以固定宽度100%宽度工作时效果不佳。




Answer 1

在现代浏览器中，您可以简单地使用css：

th {
  position: sticky;
  top: 0;
  z-index: 2;
}

Answer 2

在下面的解决方案中，表占父容器的100%，不需要绝对大小。它是纯CSS，使用flex布局。

可能的缺点：

• 垂直滚动条始终可见，无论是否需要
• 表布局是固定的-列不根据内容宽度调整大小（您仍然可以显式设置所需的任何列宽）
• 有一个绝对大小-滚动条的宽度，对于我能够检查的浏览器来说，大约是0.9em

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上的完整代码

LESS中的相同代码，因此您可以将其混合：

.table-scrollable() {
  @scrollbar-width: 0.9em;
  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%;
    }
  }
}

Answer 3

为了使<代码>

由于我们更改了tbody的display属性，我们还应该更改ad元素的该属性，以防止破坏表布局。

因此，我们有：

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浏览器将ad和tbody元素显示为行组（表头组和表行组）。

一旦我们改变了这一点，内部的tr元素就不会填满其容器的整个空间。

为了解决这个问题，我们必须计算tbody列的宽度，并通过JavaScript将相应的值应用于thead列。

以下是上述逻辑的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]);
});    

以下是输出（在Windows 7 Chrome 32上）：

工作演示。

根据原始海报的需要，我们可以将表扩展到其容器宽度的100%，然后对表的每列使用相对（百分比）宽度。

table {
    width: 100%; /* Optional */
}

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

由于表具有（某种）流体布局，因此当容器调整大小时，我们应该调整AD列的宽度。

因此，一旦窗口调整大小，我们应该设置列的宽度：

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

输出为：

工作演示。

我已经通过主要Web浏览器的新版本（包括IE10）在Windows 7上测试了上述两种方法，并且它有效。

但是，它在IE9及以下版本上无法正常工作。

这是因为在表布局中，所有元素都应该遵循相同的结构属性。

通过使用显示：块；用于

一种方法是重新设计（整个）表格布局。使用JavaScript动态创建新布局并动态处理和/或调整单元格的宽度/高度。

例如，请看以下示例：

• jQuery. FloatThead（）插件（一个浮动/锁定/粘性表头插件）
• jQuery可滚动表插件。（github上的源代码）
• jQuery。FixedHeaderTable（）插件（github上的源代码）
• DataTables垂直滚动示例。

这种方法使用两个包含div的嵌套表。第一个表只有一个单元格，其中有一个div，第二个表放在该div元素内。

在CSS播放时检查垂直滚动表。

这适用于大多数Web浏览器。我们还可以通过JavaScript动态执行上述逻辑。

由于将垂直滚动条添加到的目的

下面是Julien执行的这种方法的工作演示<它有很好的web浏览器支持。

这里是Willem Van Bockstar的纯CSS实现。

这是旧的答案。当然，我添加了一个新方法并改进了CSS声明。

在这种情况下，表应该具有固定的宽度（包括列的宽度和垂直滚动条的宽度之和）。

每一列都应该有一个特定的宽度，AD元素的最后一列需要更大的宽度，该宽度等于其他列的宽度，即垂直滚动条的宽度。

因此，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 */
}

以下是输出：

工作演示。

在这种方法中，表的宽度为100%，对于每个th和td，width属性的值应小于100%/col个数。

此外，我们需要将AD的宽度减小为垂直滚动条的宽度值。

为此，我们需要使用CSS3calc（）函数，如下所示：

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

这是在线演示。

注意：如果每列的内容断线，即每个单元格的内容应足够短，则此方法将失败。

下面是我在回答这个问题时创建的纯CSS解决方案的两个简单示例。

这是jsFiddle Demo v2。

旧版本：jsFiddle Demo v1