Html 仅CSS可滚动的表格正文

我想使用CSS只滚动表体。我找到了一些示例，但如果表行长度不同，它们就不能很好地工作

我从这个例子开始：

HTML代码：

<div class="container">
  <h1>CSS only scrollable table body</h1>
  <p>by PDG</p>
<table class="table-scroll small-first-col">
  <thead>
    <tr>
    <th>Head 1</th>
    <th>Head 2</th>
    <th>Head 3</th>
    <th>Head 4</th>
    </tr>
  </thead>
  <tbody class="body-half-screen">
    <tr>
      <td>1</td>
      <td>First row</td>
      <td>3 dsad sad sad sad sad sadsadsad sadasd asdsa</td>
      <td>4 dasd sad asdsad sad sadsa dasdsad</td>
    </tr>
    <tr>
      <td>1 dasd asd sadsadsad sadsad</td>
      <td>2dsadsadsa dsad sadasd sad sad sa</td>
      <td>A very long cell content comes here, just to test it all!!!</td>
      <td>4</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2 dsad asd asd sad sad sad asdsadsad</td>
      <td>3</td>
      <td></td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>There is an empty cell above!</td>
    </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td> Last row</td>
    </tr>
  </tbody>
</table>
  <h3>Notes</h3>
  <p>The table uses flex properties to arrange the cell sizes, however, this tends to make them the same as "fixed width". To fix that, you need to create additional classes that target the <strong>td:nth-child()</strong> and <strong>th:nth-child()</strong> with a specific <strong>flex-basis</strong> property.</p>
  <p>The <strong>height</strong> of the body also must be fixed and cannot be percentages (in the example above I use "vh")</p>
</div>

这似乎是一个好主意，在他们的演示中，一切看起来都很好，但在一个更复杂的示例中，您可以看到这些列没有很好地垂直对齐。请参见下面的示例：

我还尝试了一个不同的例子：

但在我的例子中，这也不适用于具有不同宽度行的复杂表

请建议一个css解决方案（无javascript），它可以使一个表中的任何大小的行看起来都很好

更新

---

其他解决方案不适用于我的原因是我使用的是旧版本的Mozilla Firefox-57。这就是为什么我测试的几乎所有东西都不起作用。我将问题标记为重复。

您可以在表头的

th

元素上使用

position:sticky

基本示例（CSS）：

基本标记（添加更多行以获得滚动条）：

总目1
总目2
总目3
总目4
总目5
内容1
内容2
内容3
内容4
内容5

---

此处的工作示例：

如果您希望固定单元格宽度，且包含更多内容的单元格中的文本断开并落在两行或三行上，可以尝试指定单元格宽度，高度将自动固定：

table.sticky-headers thead tr th {
    width: 20%;
    text-align:left; 
    position:sticky; 
    top:0; 
    background:#fff;
}

结果：

---

由于您更改了其所有元素的显示类型，因此它的行为不再像表了。在普通表中，一列中的所有单元格都具有相同的宽度，但在这里，您明确地设置了宽度，以便一列中的单元格具有不同的宽度。这里的预期结果是什么？您希望单元格如何排列？我希望得到以下结果：如果单元格宽度过长，文本将断开并落在两行和三行上，单元格宽度将与其他单元格对齐。因此，表行高度将增加，但单元格长度将类似。请在此示例中添加粘性位置：。我试图将其添加到“th”和“td”元素中，但“td”元素仍然没有很好地垂直对齐。@Pascut您应该删除所有

display

属性和

flex

相关属性，并为表格或单元格设置最大宽度。然后文本将自动换行。我将尝试你的建议“最大宽度”。谢谢你的建议。有这么多的事情要做，所有的flexbox属性是怎么回事？您是否需要桌面具有最大高度？我只是放弃所有的CSS，从零开始，以我的例子为起点。我试图删除“display”属性并添加“max width”属性。但是如果我删除display属性，“tbody”就不再是可滚动的了。看看这个例子：这是我能做的最好的了，否则我想我不明白你的意思。试试这个我在Mozilla Firefox上测试过的，你的例子只在Chrome上运行。它运行良好，但我希望解决方案也能在Mozilla和Safari上运行。我刚刚在Mozilla上进行了测试，效果很好。我使用的是旧版本的Mozilla:57，是的，它在最新版本上运行良好。非常感谢，我接受了你最好的答案！谢谢你抽出时间。

table.sticky-headers { width:100%; }
table.sticky-headers thead tr th { text-align:left; position:sticky; top:0; background:#fff; }

<table class="sticky-headers">
    <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>

table.sticky-headers thead tr th {
    width: 20%;
    text-align:left; 
    position:sticky; 
    top:0; 
    background:#fff;
}