仅为html表冻结顶行(固定表格标题滚动)

Question

我想制作一个顶行冻结的html表(所以当你垂直向下滚动时,你总能看到它).

有没有一种聪明的方法可以在没有javascript的情况下实现这一目标？

请注意,我不需要冻结左列.

Answer 1

这称为固定标题滚动.有许多记录在案的方法:

http://www.imaputz.com/cssStuff/bigFourVersion.html

没有JavaScript,你不会有效地解决这个问题...特别是如果你想要跨浏览器支持.

您采取的方法有很多,尤其是跨浏览器/版本支持.

编辑:

即使它不是你要修复的标题,但第一行数据,概念仍然是相同的.我不是100%你指的是.

额外的想法 我的任务是由我公司负责研究可以在IE7 +,Firefox和Chrome中运行的解决方案.

经过多次搜索,尝试和挫折之后,它真正归结为一个根本问题.在大多数情况下,为了获得固定的标题,您需要实现固定的高度/宽度列,因为大多数解决方案涉及使用两个单独的表,一个用于标题,它将浮动并保留在包含数据的第二个表的位置.

//float this one right over second table
<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
</table>

<table>
//Data
</table>

一些尝试的替代方法是利用tbody和thead标签,但这也是有缺陷的,因为IE不会允许你在tbody上放置一个滚动条,这意味着你不能限制它的高度(这么愚蠢的IMO).

<table>
  <thead style="do some stuff to fix its position">
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  </thead>
  <tbody style="No scrolling allowed here!">
     Data here
  </tbody>
</table>

这种方法有许多问题,例如确保精确的像素宽度,因为表格非常可爱,因为不同的浏览器会根据计算不同地分配像素,而您根本无法(AFAIK)保证分发在所有情况下都是完美的.如果你的桌子里有边框,那就显而易见了.

我采取了不同的方法,并说螺丝表,因为你无法做出这种保证.我用div来模仿表格.这也存在定位行和列的问题(主要是因为浮动有问题,使用内嵌块对IE7不起作用,所以它真的让我使用绝对定位将它们放在适当的位置).

有人在那里制作了Slick Grid,它有一个非常类似于我的方法,你可以使用和一个好的(尽管很复杂)的例子来实现这一点.

https://github.com/6pac/SlickGrid/wiki

Answer 2

根据带有固定标题的纯CSS可滚动表,我写了一个DEMO,通过设置overflow:auto为tbody 轻松修复标题.

table thead tr{
    display:block;
}

table th,table td{
    width:100px;//fixed width
}


table  tbody{
  display:block;
  height:200px;
  overflow:auto;//set tbody to auto
}

Answer 3

我担心的是没有固定宽度的细胞.在任何情况下似乎都无效.我发现这个解决方案似乎是我需要的.我在这里发帖给其他正在搜索的人.看看这个小提琴

工作片段:

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: 160px;
}
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>

Answer 4

您可以将CSS position: sticky;用于表MDN ref的第一行 ：

.table-class tr:first-child>td{
    position: sticky;
    top: 0;
}

Answer 5

我知道这有几个答案，但是这些都没有真正帮助我。我找到了这篇文章，该文章解释了为什么我sticky无法按预期运行。

基本上，你不能使用position: sticky;的<thead>或<tr>元素。但是，它们可以在上使用<th>。

使它正常工作所需的最低代码如下：

table {
  text-align: left;
  position: relative;
}

th {
  background: white;
  position: sticky;
  top: 0;
}

将表格设置为相对时，<th>可以将其设置为粘性，顶部为0

Answer 6

您可以使用两个 div，一个用于标题，另一个用于表格。然后使用

#headings {
  position: fixed;
  top: 0px;
  width: 960px;
}

正如@ptriek所说，这只适用于固定宽度的列。

Answer 7

可以使用position:fixedon <th>（<th>作为顶行）。

这是一个例子