8

我的钢笔：

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

我想创建一个html表：

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

我只想使用 CSS。

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

您还可以使用来自 Microsoft 的新 CSS 网格布局，它将被移植到 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;
}
4

2 回答 2

5

Isn't this what you're looking for? - http://www.imaputz.com/cssStuff/bigFourVersion.html

Just view the source of the example, and this should get you going.

于 2013-07-31T22:03:57.577 回答
-1 
        <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>
于 2015-06-29T08:09:04.287 回答