如何在 CSS 中制作带有表格和单元格宽度百分比的固定标题表？ [复制]答案

【问题标题】：How to make fixed header table with table and cell width in percents in CSS? [duplicate]如何在 CSS 中制作带有表格和单元格宽度百分比的固定标题表？ [复制]
【发布时间】：2018-04-08 07:30:30
【问题描述】：

我找到了以下固定头表的解决方案：

table {
  width: 450px;
  border-collapse: collapse;
}

thead {
  display: block;
  width: 450px;
  overflow: auto;
  color: #fff;
  background: #000;
}

tbody {
  display: block;
  width: 450px;
  height: 200px;
  background: pink;
  overflow: auto;
}

th,
td {
  padding: 0;
  text-align: left;
  vertical-align: top;
  border-left: 1px solid #fff;
}

<table>
  <thead>
    <tr>
      <th style="width:200px">Header 1</th>
      <th style="width:200px">Header 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="width:200px">Cell 1, Row 1</td>
      <td style="width:200px">Cell 2, Row 1</td>
    </tr>
    <tr>
      <td>Cell 1, Row 2</td>
      <td>Cell 2, Row 2</td>
    </tr>
    <tr>
      <td>Cell 1, Row 3</td>
      <td>Cell 2, Row 3</td>
    </tr>
    <tr>
      <td>Cell 1, Row 4</td>
      <td>Cell 2, Row 4</td>
    </tr>
    <tr>
      <td>Cell 1, Row 5</td>
      <td>Cell 2, Row 5</td>
    </tr>
    <tr>
      <td>Cell 1, Row 6</td>
      <td>Cell 2, Row 6</td>
    </tr>
    <tr>
      <td>Cell 1, Row 7</td>
      <td>Cell 2, Row 7</td>
    </tr>
    <tr>
      <td>Cell 1, Row 8</td>
      <td>Cell 2, Row 8</td>
    </tr>
    <tr>
      <td>Cell 1, Row 9</td>
      <td>Cell 2, Row 9</td>
    </tr>
    <tr>
      <td>Cell 1, Row 10</td>
      <td>Cell 2, Row 10</td>
    </tr>
    <tr>
      <td>Cell 1, Row 11</td>
      <td>Cell 2, Row 11</td>
    </tr>
    <tr>
      <td>Cell 1, Row 12</td>
      <td>Cell 2, Row 12</td>
    </tr>
  </tbody>
</table>

此解决方案的问题在于它为表格和单元格设置了固定宽度（以像素为单位）。但是，我需要<table style="width:100%"> 和<td style="width:X%">。如何仅使用 one html 表格而不使用 JS 在 CSS 中制作具有表格和单元格宽度百分比的固定标题表格？

【问题讨论】：

也许你可以看看 bootstrap w3schools.com/bootstrap/…
@Sebastian Speitel 谢谢。我想编辑，但在编辑器中一切看起来都很好。
保存前点击tidy即可。然后编辑器为您完成所有格式设置

标签： html css

【解决方案1】：

检查发布在另一个问题上的此解决方案。 Fixed Header solution.

或者直接试试这个Fiddle

标题内容放置在“th”中的“div”内。此 div 具有绝对位置和其他样式以将标题显示为固定。

html, body{
  margin:0;
  padding:0;
  height:100%;
}
section {
  position: relative;
  border: 1px solid #000;
  padding-top: 37px;
  background: #500;
}
section.positioned {
  position: absolute;
  top:100px;
  left:100px;
  width:800px;
  box-shadow: 0 0 15px #333;
}
.container {
  overflow-y: auto;
  height: 200px;
}
table {
  border-spacing: 0;
  width:100%;
}
td + td {
  border-left:1px solid #eee;
}
td, th {
  border-bottom:1px solid #eee;
  background: #ddd;
  color: #000;
  padding: 10px 25px;
}
th {
  height: 0;
  line-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  color: transparent;
  border: none;
  white-space: nowrap;
}
th div{
  position: absolute;
  background: transparent;
  color: #fff;
  padding: 9px 25px;
  top: 0;
  margin-left: -25px;
  line-height: normal;
  border-left: 1px solid #800;
}
th:first-child div{
  border: none;
}

<section class="">
  <div class="container">
    <table>
      <thead>
        <tr class="header">
          <th>
            Table attribute name
            <div>Table attribute name</div>
          </th>
          <th>
            Value
            <div>Value</div>
          </th>
          <th>
            Description
            <div>Description</div>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>align</td>
          <td>left, center, right</td>
          <td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies the alignment of a table according to surrounding text</td>
        </tr>
        <tr>
          <td>bgcolor</td>
          <td>rgb(x,x,x), #xxxxxx, colorname</td>
          <td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies the background color for a table</td>
        </tr>
        <tr>
          <td>border</td>
          <td>1,""</td>
          <td>Specifies whether the table cells should have borders or not</td>
        </tr>
        <tr>
          <td>cellpadding</td>
          <td>pixels</td>
          <td>Not supported in HTML5. Specifies the space between the cell wall and the cell content</td>
        </tr>
        <tr>
          <td>cellspacing</td>
          <td>pixels</td>
          <td>Not supported in HTML5. Specifies the space between cells</td>
        </tr>
        <tr>
          <td>frame</td>
          <td>void, above, below, hsides, lhs, rhs, vsides, box, border</td>
          <td>Not supported in HTML5. Specifies which parts of the outside borders that should be visible</td>
        </tr>
        <tr>
          <td>rules</td>
          <td>none, groups, rows, cols, all</td>
          <td>Not supported in HTML5. Specifies which parts of the inside borders that should be visible</td>
        </tr>
        <tr>
          <td>summary</td>
          <td>text</td>
          <td>Not supported in HTML5. Specifies a summary of the content of a table</td>
        </tr>
        <tr>
          <td>width</td>
          <td>pixels, %</td>
          <td>Not supported in HTML5. Specifies the width of a table</td>
        </tr>
      </tbody>
    </table>
  </div>
</section>

【讨论】：

你能解释一下section.positioned是什么吗？
你能解释一下为什么在 th 和 div 中有重复的文本，我的意思是 <th>Table attribute name<div>Table attribute name</div></th>？
@Pavel_K 小提琴中没有使用 section.positioned。这只是该部分的一些样式。 <th>Table attribute name<div>Table attribute name</div></th> div 给出了固定的标题效果。 <th> 内容在 <div> 中重复，然后给定绝对位置。
如果你只是复制粘贴另一个答案的源代码作为答案，这是不行的，你可以把那个答案的链接放在 cmets 中。但是您可以从适当参考的答案中获得帮助，并在 OP 提供的 sn-p 上做出自己的答案，这将是一个新的答案。

【解决方案2】：

好吧，这是我的解决方案。

对于 HTML，您只需要在两个 div 包装器中进行包装，在 thead th 中您需要有一些代码重复 - 我将很快解释原因。

您需要.table-outer 包装器来创建必要的padding-top 和position:relative，以容纳固定表头。

.table-wrap 包装器用于滚动表格内容。一个包装器不能单独用于绝对定位标题，因为它会与父级一起滚动。

现在我已将th 的内容复制并包装在p 和span 中。 span 元素用于正确设置标题的样式和位置。 p 起初可能看起来没有必要，但它就是这样做的——它确保th 在th 内容的宽度大于最大的td 内容的情况下正确扩展。

HTML

<div class="table-outer">
  <div class="table-wrap">
    <table>
      <thead>
        <tr>
          <th>
            <p>Header 1</p><span>Header 1</span></th>
          <th>
            <p>Header 1</p><span>Header 2</span></th>
        </tr>
      </thead>
      <tbody>
       ...
      </tbody>
    </table>
  </div>
</div>

CSS

.table-outer {
  padding-top: 20px;
  position: relative;
  height: 100px;
  overflow: hidden;
}

.table-wrap {
  overflow-x: auto;
  overflow-y: scroll;
  width: 100%;
  height: 100%;
}
thead th p {
  overflow: hidden;
  height: 0;
  margin: 0;
  padding: 0;
}

thead th span {
  position: absolute;
  top: 0;
  display: block;
  background: #000;
  color: #fff;
  width: 100%;
}

这是一个有效的小提琴，以及一个显示表格中不同内容的小更新： https://jsfiddle.net/8fa1w922/ https://jsfiddle.net/8fa1w922/2/

【讨论】：

【解决方案3】：

带有某种display:table 的元素不能有滚动条，但您可以在<div> 内创建另一个表格，它可以完成溢出部分。

table {
  width: 300px;
  border-collapse: collapse;
}

#scroll {
  overflow-y: auto;
  height: 200px;
  width: fit-content;
}

thead {
  color: #fff;
  background: #000;
}

tbody {
  background: pink;
}

th,
td {
  padding: 0;
  text-align: left;
  vertical-align: top;
  border-left: 1px solid #fff;
}

<table>
  <thead>
    <tr>
      <th style="width:40%">Header 1</th>
      <th style="width:60%">Header 2</th>
    </tr>
  </thead>
</table>
<div id="scroll">
  <table>
    <tbody>
      <tr>
        <td style="width:40%">Cell 1, Row 1</td>
        <td style="width:60%">Cell 2, Row 1</td>
      </tr>
      <tr>
        <td>Cell 1, Row 2</td>
        <td>Cell 2, Row 2</td>
      </tr>
      <tr>
        <td>Cell 1, Row 3</td>
        <td>Cell 2, Row 3</td>
      </tr>
      <tr>
        <td>Cell 1, Row 4</td>
        <td>Cell 2, Row 4</td>
      </tr>
      <tr>
        <td>Cell 1, Row 5</td>
        <td>Cell 2, Row 5</td>
      </tr>
      <tr>
        <td>Cell 1, Row 6</td>
        <td>Cell 2, Row 6</td>
      </tr>
      <tr>
        <td>Cell 1, Row 7</td>
        <td>Cell 2, Row 7</td>
      </tr>
      <tr>
        <td>Cell 1, Row 8</td>
        <td>Cell 2, Row 8</td>
      </tr>
      <tr>
        <td>Cell 1, Row 9</td>
        <td>Cell 2, Row 9</td>
      </tr>
      <tr>
        <td>Cell 1, Row 10</td>
        <td>Cell 2, Row 10</td>
      </tr>
      <tr>
        <td>Cell 1, Row 11</td>
        <td>Cell 2, Row 11</td>
      </tr>
      <tr>
        <td>Cell 1, Row 12</td>
        <td>Cell 2, Row 12</td>
      </tr>
      <tr>
        <td>Cell 1, Row 12</td>
        <td>Cell 2, Row 12</td>
      </tr>
      <tr>
        <td>Cell 1, Row 12</td>
        <td>Cell 2, Row 12</td>
      </tr>
      <tr>
        <td>Cell 1, Row 12</td>
        <td>Cell 2, Row 12</td>
      </tr>
    </tbody>
  </table>

【讨论】：

感谢您的回答。但是在您的解决方案中，表头不固定。
所以<tbody> 的列不应该与标题匹配？
抱歉，没听懂。运行问题中的代码sn -p，你会看到我需要什么。
问题中的coden-p是预期的结果吗？
是的，预期的结果。唯一的问题是px 有宽度，但我需要%。

【解决方案4】：

您可以使用 display: flex 表格行的样式来获得它。然后使用 flex-basis 设置第一个元素的宽度（按您的要求以百分比表示）

然而，有一个隐藏的问题。由于 body 有一个滚动条，而 head 没有，所以 body 的尺寸小于 head 的尺寸（在滚动条的宽度上）。

因此，将头部的宽度设置为 50% 会得到与身体相同的不同结果。

更糟糕的是，每个浏览器都有不同的滚动条宽度。

为了解决这个问题，我在头部也强制了一个滚动条。

你可以设置一些技巧来隐藏它，比如右上角的伪元素

table {
  width: 450px;
  border-collapse: collapse;
}

thead {
  display: block;
  width: 450px;
  overflow: auto;
  color: #fff;
  background: #000;
}

tbody {
  display: block;
  width: 450px;
  height: 200px;
  background: pink;
  overflow: auto;
}

tr {
  display: flex;
}
thead tr {
  overflow-y: scroll;
}

th,
td {
  padding: 0;
  text-align: left;
  vertical-align: top;
  border-left: 1px solid #fff;
}

th:first-child,
td:first-child {
   flex-basis: 50%;
}

<table>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Cell 1, Row 1</td>
      <td>Cell 2, Row 1</td>
    </tr>
    <tr>
      <td>Cell 1, Row 2</td>
      <td>Cell 2, Row 2</td>
    </tr>
    <tr>
      <td>Cell 1, Row 3</td>
      <td>Cell 2, Row 3</td>
    </tr>
    <tr>
      <td>Cell 1, Row 4</td>
      <td>Cell 2, Row 4</td>
    </tr>
    <tr>
      <td>Cell 1, Row 5</td>
      <td>Cell 2, Row 5</td>
    </tr>
    <tr>
      <td>Cell 1, Row 6</td>
      <td>Cell 2, Row 6</td>
    </tr>
    <tr>
      <td>Cell 1, Row 7</td>
      <td>Cell 2, Row 7</td>
    </tr>
    <tr>
      <td>Cell 1, Row 8</td>
      <td>Cell 2, Row 8</td>
    </tr>
    <tr>
      <td>Cell 1, Row 9</td>
      <td>Cell 2, Row 9</td>
    </tr>
    <tr>
      <td>Cell 1, Row 10</td>
      <td>Cell 2, Row 10</td>
    </tr>
    <tr>
      <td>Cell 1, Row 11</td>
      <td>Cell 2, Row 11</td>
    </tr>
    <tr>
      <td>Cell 1, Row 12</td>
      <td>Cell 2, Row 12</td>
    </tr>
  </tbody>
</table>

【讨论】：

【解决方案5】：

我知道 OP 要求没有 js 的解决方案......但这也许可以帮助你。我写了一个 jQuery 函数，因为我有很多表头要粘贴... 检查jsFiddle：https://jsfiddle.net/qa4q12Lw/18/

jQuery.fn.stickTableHeaders = function() {
  return this.each(function()
  {
    if(!$(this).is('[data-stick-headers="false"]') && !$(this).is('.table-sticked')) {
      var table = $(this),
            header = table.children('thead'),
            sticked = $('<table></table>').addClass('table table-sticked').css({'margin':'0'}).append(header.clone());

                // Manualy aply styles to the cloned thead and everything in it. Don't know if you'll need this?
      sticked.find('th').css({'backgroundColor': '#fff'}).removeAttr('width');

    $(window).resize(function() {
      // Be sure it recalculates stuff on window resize
      sticked.find('th').each(function() {
          var headerTH = header.find('th').eq($(this).index());
          if(headerTH.is('[width]') || headerTH.is(':first-child') || headerTH.is(':last-child')) {
            $(this).width(header.find('th').eq($(this).index()).width());
          }
          else {
            $(this).width(header.find('th').eq($(this).index()).width());
          }
        });

        table.css({'marginTop':-header.height()});

    }).trigger('resize');
                // top property should be position where to stay sticky
      sticked.css({'display':'table','width':'100%','position':'sticky','top':0, 'zIndex':'10'});

      $(this).before(sticked);
    }
  });
};

要获得最佳结果，您应该将widths 设置为大多数th。

【讨论】：

【解决方案6】：

序言：根据一般原则，我相信以下类型的任何方法：

标记必须看起来像这个
这种语言或技术是允许的，而另一种是不允许的

...有缺陷。

网络是呈现内容的问题。
无论在幕后使用什么技术完全都无关紧要。唯一重要的是结果：最终用户体验、支持该解决方案的浏览器/设备的市场份额，以及最终产品/代码的成功（这是努力与结果的问题）。

这应该是唯一的论点。

让我们从实际的角度来看这个：

您需要<table> 的功能，它非常简洁：它会根据内容自动调整列中所有单元格的宽度。在飞行中。当然，与其他任何东西相比，这是以表格非常慢为代价的。这就是为什么应该避免使用它们，并且仅在您确实需要这种自动宽度魔术并且不需要响应时才使用它们。顺便说一句：如今，没有响应式内容会让您付出很多代价：Google 检测到它，他们认为您的内容不适合触摸/窄设备，因此，将您放在任何此类设备的搜索结果中（以及，猜猜看 - 它们占流量的 50% 以上！）。

但是，等等：你把所有的自动宽度魔法都扔掉了，把你的单元格宽度固定在50%。这意味着在这里使用<table>s （技术上）没有任何意义。您可以使用<div>s 轻松实现此布局（包括固定标题），您的页面将更快，并且您还将有更多的响应选项。这里的表唯一很小的优势是拥有border-collapse。但这很容易在:not(:first-child) 或:first-child“单元格”上使用等于border-width 的负边距来实现。

为了争论，这是我的做法（作为家庭作业）：

.wrapper {
  max-height: 150px;
  overflow-y: auto; 
  display: inline-block;
  padding-top: 19px;
}
table {
  width: 100vw;
  border-collapse: collapse;
}
th, td {
  width: 50%;
}
thead tr{
  position:fixed;
  width: 100vw;
  overflow: hidden;
  color: #fff;
  background: #000;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  top: 0;
  height: 18px;
  border-bottom: 1px solid #fff;
}

tbody {
  background: pink;
  overflow: auto;
}

th,
td {
  padding: 0;
  text-align: left;
  vertical-align: top;
  border-left: 1px solid #fff;
}

body {
  margin: 0;
  overflow-x: hidden
}

<div class="wrapper">
<table>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Cell 1, Row 1</td>
      <td>Cell 2, Row 1</td>
    </tr>
    <tr>
      <td>Cell 1, Row 2</td>
      <td>Cell 2, Row 2 Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet</td>
    </tr>
    <tr>
      <td>Cell 1, Row 3</td>
      <td>Cell 2, Row 3</td>
    </tr>
    <tr>
      <td>Cell 1, Row 4</td>
      <td>Cell 2, Row 4</td>
    </tr>
    <tr>
      <td>Cell 1, Row 5</td>
      <td>Cell 2, Row 5</td>
    </tr>
    <tr>
      <td>Cell 1, Row 6</td>
      <td>Cell 2, Row 6</td>
    </tr>
    <tr>
      <td>Cell 1, Row 7</td>
      <td>Cell 2, Row 7</td>
    </tr>
    <tr>
      <td>Cell 1, Row 8</td>
      <td>Cell 2, Row 8</td>
    </tr>
    <tr>
      <td>Cell 1, Row 9</td>
      <td>Cell 2, Row 8</td>
    </tr>
    <tr>
      <td>Cell 1, Row 10</td>
      <td>Cell 2, Row 10</td>
    </tr>
    <tr>
      <td>Cell 1, Row 11</td>
      <td>Cell 2, Row 11</td>
    </tr>
    <tr>
      <td>Cell 1, Row 12</td>
      <td>Cell 2, Row 12</td>
    </tr>
  </tbody>
</table>
</div>

但是，实际上，鉴于您不关心单元格根据其他列兄弟自动调整宽度，唯一在技术和性能方面有意义的解决方案是<div>s（无论您放什么在里面）。

这意味着我想澄清一下，这会让您付出真金白银（您的页面在 x % 的目标设备上运行缓慢 - 将您的客户推向另一个网站，该网站可能使用了技术上合理的东西。它是 @ 987654332@? 大多数（如果不是所有）客户都会说这是一张桌子。一张平滑的桌子，可以改变。

.table {
  width: 100vw;
  padding-top: 19px;
  position: relative;
}
.thead >div >span, .tbody>div > span {
  width: 50%;
}
.thead:after {
  position: absolute;
  background: black;
  content: '';
  width: 17px;
  height: 18px;
  right: 0;
  top: 0;
}
.thead > div{
  position:fixed;
  width: 100vw;
  max-width: 100%;
  color: #fff;
  background: #000;
  display: flex;
  top: 0;
  height: 18px;
  border-bottom: 1px solid rgba(255,255,255,.65);
  overflow-y: scroll;
  overflow-x: hidden;
}

.tbody{
  background: pink;
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
  max-height: 150px;
}
.tbody > div {
  display: flex;
  flex: 1 0 auto;
  border-bottom: 1px solid rgba(255,255,255,.21);
}
.tbody > div> span, .thead>div>span {
  flex: 0 0 50%;
  padding: 0;
  text-align: left;
}
.thead > div > span:not(:first-child) ,
.tbody > div > span:not(:first-child) {
  margin-left: -1px;
  border-left: 1px solid rgba(255,255,255,.21);
}

body {
  margin: 0;
  overflow-x: hidden
}

<div class="table">
  <div class="thead">
    <div>
      <span>Header 1</span>
      <span>Header 2</span>
    </div>
  </div>
  <div class="tbody">
    <div>
      <span>Cell 1, Row 1</span>
      <span>Cell 2, Row 1</span>
    </div>
    <div>
      <span>Cell 1, Row 2</span>
      <span>Cell 2, Row 2 Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet</span>
    </div>
    <div>
      <span>Cell 1, Row 3</span>
      <span>Cell 2, Row 3</span>
    </div>
    <div>
      <span>Cell 1, Row 4</span>
      <span>Cell 2, Row 4</span>
    </div>
    <div>
      <span>Cell 1, Row 5</span>
      <span>Cell 2, Row 5</span>
    </div>
    <div>
      <span>Cell 1, Row 6</span>
      <span>Cell 2, Row 6</span>
    </div>
    <div>
      <span>Cell 1, Row 7</span>
      <span>Cell 2, Row 7</span>
    </div>
    <div>
      <span>Cell 1, Row 8</span>
      <span>Cell 2, Row 8</span>
    </div>
    <div>
      <span>Cell 1, Row 9</span>
      <span>Cell 2, Row 8</span>
    </div>
    <div>
      <span>Cell 1, Row 10</span>
      <span>Cell 2, Row 10</span>
    </div>
    <div>
      <span>Cell 1, Row 11</span>
      <span>Cell 2, Row 11</span>
    </div>
    <div>
      <span>Cell 1, Row 12</span>
      <span>Cell 2, Row 12</span>
    </div>
  </div>
</div>

大多数人在考虑表格数据时，会自动想象 Excel。在所有产品中，您会认为 MS Excel 在线是 <table>s 有意义的地方，对吧？事实证明它们太慢了，使用绝对定位的<div>s 可以提供更好的用户体验。

但也许 MS 不是最好的例子，毕竟他们确实输掉了浏览器大战，对吧？让我们看看谷歌表格。你猜对了：他们是 Google <div>s。

【讨论】：

对不起，我没听懂。我在问% 中表格和单元格宽度的解决方案。您的解决方案位于px。请解释一下。
你的意思是this？桌子的宽度无关紧要。它很可能是其父级的大小。列是百分比。这就是你要求的，对吧？
哦，我没注意到你用div而不是table。但是如何将Header 2 左边框与tbody 边框对齐？我的意思是由于滚动而存在一些偏移。
也许你应该读一读。当你有时间的时候:)
我编辑了我的评论。

【解决方案7】：

编辑：具有更好兼容性的解决方法，但您需要调整窗口上的标题，可能添加溢出滚动，然后添加负边距和相同大小的正填充以隐藏滚动条。

如果您不关心 Internet Explorer，可以使用position: sticky。 https://developer.mozilla.org/en-US/docs/Web/CSS/position 无需 JS。

.wrapwrap {
    position: relative;
}

.wrapper {
    height: 100px;
    overflow: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
}

thead {
  position: absolute;
  top: 0;
  width: 100%;
  display: inherit;

}

tbody {
  background: pink;
}

th {
    background: #000;
    color: #FFF;
}

th,
td {
  padding: 0;
  text-align: left;
  vertical-align: top;
  border-left: 1px solid #fff;
}

<h1>Position Sticky</h1>
<div class="wrapwrap">><div class="wrapper"><table>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Cell 1, Row 1</td>
      <td>Cell 2, Row 1</td>
    </tr>
    <tr>
      <td>Cell 1, Row 2</td>
      <td>Cell 2, Row 2</td>
    </tr>
    <tr>
      <td>Cell 1, Row 3</td>
      <td>Cell 2, Row 3</td>
    </tr>
    <tr>
      <td>Cell 1, Row 4</td>
      <td>Cell 2, Row 4</td>
    </tr>
    <tr>
      <td>Cell 1, Row 5</td>
      <td>Cell 2, Row 5</td>
    </tr>
    <tr>
      <td>Cell 1, Row 6</td>
      <td>Cell 2, Row 6</td>
    </tr>
    <tr>
      <td>Cell 1, Row 7</td>
      <td>Cell 2, Row 7</td>
    </tr>
    <tr>
      <td>Cell 1, Row 8</td>
      <td>Cell 2, Row 8</td>
    </tr>
    <tr>
      <td>Cell 1, Row 9</td>
      <td>Cell 2, Row 9</td>
    </tr>
    <tr>
      <td>Cell 1, Row 10</td>
      <td>Cell 2, Row 10</td>
    </tr>
    <tr>
      <td>Cell 1, Row 11</td>
      <td>Cell 2, Row 11</td>
    </tr>
    <tr>
      <td>Cell 1, Row 12</td>
      <td>Cell 2, Row 12</td>
    </tr>
  </tbody>
</table></div></div>

【讨论】：

感谢您的解决方案，但在您的解决方案标题中没有固定。
他们是，你用的是什么浏览器？
我使用 FF 58 64 位
mh 可悲，FF 不支持粘性内部溢出：自动； github.com/w3c/csswg-drafts/issues/865
不过，我想我的最后一次尝试可能是一个解决方案