Question

我的笔：

http://codepen.io/helloworld/pen/qHDFB

我想创建一个html表：

标题保持不变
显示滚动条的表格主体
高度不应该有固定的像素高度，它应该有100％的高度。
标题单元格应与行单元格对齐。我提到这一点是因为我经常看到其中column1水平进入header2区域的解决方案。这看起来很糟糕。
当列具有百分比宽度但不是像素时，它对我来说没问题，因为它不会响应。
性能没有任何作用，它将显示最多16行appr。最多7列。

我只想使用CSS。

它应该适用于IE10 +和最新的FF / Chrome。

您还可以使用Microsoft的新CSS Grid Layout，它将移植到webkit等...使用-ms-grid等...

如何使上面的单个样本工作，标题保持固定，并且表的主体有垂直滚动条而不是html主体本身？

HTML

<table>
  <thead>
    <tr>
      <th>
        <div>First</div>
      </th>
      <th>
        <div>Second</div>
      </th>
      <th>
        <div>Third</div>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>First</td>
      <td>Second</td>
      <td>Third</td>
    </tr>
    <tr>
      <td>First</td>
      <td>Second</td>
      <td>Third</td>
    </tr>
    <tr>
      <td>First</td>
      <td>Second</td>
      <td>Third</td>
    </tr>
    <tr>
      <td>First</td>
      <td>Second</td>
      <td>Third</td>
    </tr>
    <tr>
      <td>First</td>
      <td>Second</td>
      <td>Third</td>
    </tr>
    <tr>
      <td>First</td>
      <td>Second</td>
      <td>Third</td>
    </tr>
    <tr>
      <td>First</td>
      <td>Second</td>
      <td>Third</td>
    </tr>
    <tr>
      <td>First</td>
      <td>Second</td>
      <td>Third</td>
    </tr>
    <tr>
      <td>First</td>
      <td>Second</td>
      <td>Third</td>
    </tr>
    <tr>
      <td>First</td>
      <td>Second</td>
      <td>Third</td>
    </tr>                  
  </tbody>
</table>

CSS

body, html{
  margin:0;
  padding:0;
  height:100%;
  width:100%;
}

table{
  width:100%;
  height:100%;
}

td{
  width:33%;
  border:black solid 1px;
}

tbody{
  overflow-x:hidden;
  overflow-y:auto;
}

tr td{
  text-align:center;
  height:100px;
}

th{
  background:lightgray;
  padding:10px;
  border:black solid 1px;
}

Answer 1

这不是你要找的吗？ - http://www.imaputz.com/cssStuff/bigFourVersion.html

只需查看示例的来源，这应该让你前进。

Answer 2

        <table>
            <thead>
                <tr>
                    <th>
                        <div>First</div>
                    </th>
                    <th>
                        <div>Second</div>
                    </th>
                    <th>
                        <div>Third</div>
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>First</td>
                    <td>Second</td>
                    <td>Third</td>
                </tr>
                <tr>
                    <td>First</td>
                    <td>Second</td>
                    <td>Third</td>
                </tr>
                <tr>
                    <td>First</td>
                    <td>Second</td>
                    <td>Third</td>
                </tr>
                <tr>
                    <td>First</td>
                    <td>Second</td>
                    <td>Third</td>
                </tr>
                <tr>
                    <td>First</td>
                    <td>Second</td>
                    <td>Third</td>
                </tr>
                <tr>
                    <td>First</td>
                    <td>Second</td>
                    <td>Third</td>
                </tr>
                <tr>
                    <td>First</td>
                    <td>Second</td>
                    <td>Third</td>
                </tr>
                <tr>
                    <td>First</td>
                    <td>Second</td>
                    <td>Third</td>
                </tr>
                <tr>
                    <td>First</td>
                    <td>Second</td>
                    <td>Third</td>
                </tr>
                <tr>
                    <td>First</td>
                    <td>Second</td>
                    <td>Third</td>
                </tr>                  
            </tbody>
        </table>

带有固定标题和表体上垂直滚动条的Html表

2 个答案: