在纯CSS上具有固定标题和固定列的表


97

我需要创建一个具有固定标题和固定第一列的html表(或类似外观的表)。

到目前为止,我所见过的每个解决方案都使用Javascript或jQuery设置scrollTop / scrollLeft,但在移动浏览器上无法正常运行,因此我正在寻找一种纯CSS解决方案。

我在这里找到了固定列的解决方案:jsfiddle.net/C8Dtf/20/,但我不知道如何增强它以使标头也固定。

我希望它可以在Webkit浏览器上使用或使用某些css3功能,但是我要重复一遍,我不想Javascript用于滚动。

编辑:这是我要实现的行为的示例:https : //web.archive.org/web/20130829032141/http : //datatables.net/release-datatables/extras/FixedColumns/css_size.html


我暂时没有看到具有固定标题<thead>的<html> <table>与css-level-3有何关系。你还有什么?你都尝试了些什么 ?
Milche Patern

我试图将复杂的position行为应用于行和单元格,但是我不太了解它在哪里适用。
panfil

2
这样的回答可以帮助你stackoverflow.com/questions/14834198/...
加里

Answers:


141

具有固定标题行和第一列的实际纯CSS解决方案

我必须使用纯CSS创建一个既有固定标题又有固定第一列的表,而这里的答案都不是我想要的。

position: sticky属性既支持粘贴在顶部(如我所见,使用最多),又支持现代版本的Chrome,Firefox和Edge。可以将其与div具有overflow: scroll属性的组合使用,该属性可以为您提供带有固定标题的表,该表可以放在页面的任何位置:

将表格放在容器中:

<div class="container">
  <table></table>
</div>

overflow: scroll在容器上使用以启用滚动:

div.container {
  overflow: scroll;
}

正如达格玛(Dagmar)在评论中指出的那样,该容器还需要a max-width和a max-height

用于position: sticky使表格单元格贴在边缘和top,上right,或left选择要贴在哪个边缘上:

thead th {
  position: -webkit-sticky; /* for Safari */
  position: sticky;
  top: 0;
}

tbody th {
  position: -webkit-sticky; /* for Safari */
  position: sticky;
  left: 0;
}

正如MarredCheese在评论中提到的那样,如果第一列包含<td>元素而不是<th>元素,则可以tbody td:first-child在CSS中使用,而不是tbody th

要使第一列中的标题停留在左侧,请使用:

thead th:first-child {
  left: 0;
  z-index: 1;
}

https://jsfiddle.net/qwubvg9m/1/


22
这似乎是最好的答案。
user1190132 '18

9
@PirateApp如果您知道width第一列的,则可以position: sticky在第二列的单元格上使用left等于第一列的值widthjsfiddle.net/wvypo83c/794
Matthew Schlachter

4
这个答案证明从头到尾阅读都是值得的!
mlerley

4
没有在容器上设置max-width和max-height,这是行不通的。
达格玛

9
这个答案是一座灯塔,它指引着我们回家,从SO和整个Web上令人惊讶,自信,迷惑的海报中不断出现故障,过度复杂,浪费时间的答案中解脱出来。请注意,如果第一列包含<td>元素而不是<th>元素,则可以tbody td:first-child在CSS中使用而不是tbody th
MarredCheese

32

如今,CSS与属性一起使用是可以实现的。position: sticky

这是一个片段:

(jsFiddle:https ://jsfiddle.net/hbqzdzdt/5/ )

.grid-container {
  display: grid; /* This is a (hacky) way to make the .grid element size to fit its content */
  overflow: auto;
  height: 300px;
  width: 600px;
}
.grid {
  display: flex;
  flex-wrap: nowrap;
}
.grid-col {
  width: 150px;
  min-width: 150px;
}

.grid-item--header {
  height: 100px;
  min-height: 100px;
  position: sticky;
  position: -webkit-sticky;
  background: white;
  top: 0;
}

.grid-col--fixed-left {
  position: sticky;
  left: 0;
  z-index: 9998;
  background: white;
}
.grid-col--fixed-right {
  position: sticky;
  right: 0;
  z-index: 9998;
  background: white;
}

.grid-item {
  height: 50px;
  border: 1px solid gray;
}
<div class="grid-container">
  <div class="grid">
    <div class="grid-col grid-col--fixed-left">
      <div class="grid-item grid-item--header">
        <p>HEAD</p>
      </div>
      <div class="grid-item">
        <p>Hello</p>
      </div>
      <div class="grid-item">
        <p>Hello</p>
      </div>
      <div class="grid-item">
        <p>Hello</p>
      </div>
      <div class="grid-item">
        <p>Hello</p>
      </div>
      <div class="grid-item">
        <p>Hello</p>
      </div>
      <div class="grid-item">
        <p>Hello</p>
      </div>
      <div class="grid-item">
        <p>Hello</p>
      </div>
      <div class="grid-item">
        <p>Hello</p>
      </div>
      <div class="grid-item">
        <p>Hello</p>
      </div>
      <div class="grid-item">
        <p>Hello</p>
      </div>
    </div>

    <div class="grid-col">
      <div class="grid-item grid-item--header">
        <p>HEAD</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
    </div>

    <div class="grid-col">
      <div class="grid-item grid-item--header">
        <p>HEAD</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
    </div>

    <div class="grid-col">
      <div class="grid-item grid-item--header">
        <p>HEAD</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
    </div>

    <div class="grid-col">
      <div class="grid-item grid-item--header">
        <p>HEAD</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
    </div>

    <div class="grid-col">
      <div class="grid-item grid-item--header">
        <p>HEAD</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
    </div>

    <div class="grid-col">
      <div class="grid-item grid-item--header">
        <p>HEAD</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
    </div>

    <div class="grid-col">
      <div class="grid-item grid-item--header">
        <p>HEAD</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
    </div>

    <div class="grid-col">
      <div class="grid-item grid-item--header">
        <p>HEAD</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
    </div>

    <div class="grid-col">
      <div class="grid-item grid-item--header">
        <p>HEAD</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
    </div>

    <div class="grid-col">
      <div class="grid-item grid-item--header">
        <p>HEAD</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
    </div>

    <div class="grid-col grid-col--fixed-right">
      <div class="grid-item grid-item--header">
        <p>HEAD</p>
      </div>
      <div class="grid-item">
        <p>9</p>
      </div>
      <div class="grid-item">
        <p>9</p>
      </div>
      <div class="grid-item">
        <p>9</p>
      </div>
      <div class="grid-item">
        <p>9</p>
      </div>
      <div class="grid-item">
        <p>9</p>
      </div>
      <div class="grid-item">
        <p>9</p>
      </div>
      <div class="grid-item">
        <p>9</p>
      </div>
      <div class="grid-item">
        <p>9</p>
      </div>
      <div class="grid-item">
        <p>9</p>
      </div>
      <div class="grid-item">
        <p>9</p>
      </div>
    </div>

  </div>
</div>

关于兼容性。它适用于所有主要浏览器,但不适用于IE。有一个polyfill,position: sticky但我从未尝试过。


2
这太好了,喜欢它!
陆队长

3
用<table> -tags而不是<div>来实现这一目标的任何方法
Andreas

1
我认为,如果您正在开发应用程序并且需要遍历记录以打印该表,那么这将不会有良好的性能,因为对于表中的每一列,您都必须遍历整个记录的数组。该HTML逐列工作。
igasparetto

@igasparetto实际上,您可以以其他方式排列行/列,而该解决方案仍然有效。如果以后有空,我可以使用网格排序的行->列创建一个代码段。
Alvaro

2
我建议不要在不使用<table>和相关标签的情况下显示表格数据。以这种方式破坏HTML的预期用途存在多个问题,包括可访问性。另请参见:w3.org/WAI/tutorials/tables
Ben Morris

15

这并非易事。

以下链接是有效的演示:

链接根据lanoxx的评论更新

http://jsfiddle.net/C8Dtf/366/

只记得添加以下内容:

<script type="text/javascript" charset="utf-8" src="http://datatables.net/release-datatables/media/js/jquery.js"></script>
<script type="text/javascript" charset="utf-8" src="http://datatables.net/release-datatables/media/js/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf-8" src="http://datatables.net/release-datatables/extras/FixedColumns/media/js/FixedColumns.js"></script>

我看不到任何其他方式来实现这一目标。特别是不能仅使用CSS。

这要经历很多事情。希望这可以帮助 :)


要切换过滤器,请使用: "bFilter": false
lanoxx

6
可能仅适用于CSS来实现这一目标。不容易,但可能。
Jimmy T.

从大约10种解决方案中,这是唯一可行的解​​决方案。顺便说一句,删除“显示1到57的57项”添加"bInfo" : false.dataTable()通话
hansaplast

datatables ==“ awesome”
billynoah 2014年

不赞成使用此解决方案,因为它很糟糕。的thead是在其自己的表,该表不绑定到的变化td的元件,因此,如果一个小区的文本很长,该th宽度也不会相应地调整。
vsync

14

所有这些建议都很棒,但都只是固定标题或列,而不是两者,或者都使用了javascript。原因-它不相信可以在纯CSS中完成。原因:

如果可能的话,您需要将几个可滚动的div嵌套在另一个div中,每个div都朝着不同的方向滚动。然后,您需要将表分为三部分-固定标题,固定列和其余数据。

精细。但是现在的问题是-您可以在滚动时让其中一个保持原状,但另一个嵌套在第一个的滚动区域内,因此自身会被滚动到视线之外,因此无法固定在屏幕。“啊哈”你说“但是我可以以某种方式使用绝对或固定位置来做到这一点”-不,你不能。一旦这样做,就会失去滚动该容器的能力。这是鸡与蛋的情况-您不能两者兼得,它们彼此抵消。

我相信唯一的解决方案是通过javascript。您需要完全分离出这三个元素,并通过javascript使其位置保持同步。此页面上的其他帖子中有很好的示例。这个也值得一看:

http://tympanus.net/codrops/2014/01/09/sticky-table-headers-columns/


9

我在jsfiddle中进行了一些更改。这可能就是您要尝试做的。

http://jsfiddle.net/C8Dtf/81/

我已经对标题进行了硬编码,如下所示:

<table id="left_table" class="freeze_table">
    <tr class='tblTitle'>
         <th>Title 1</th>
         <th>Title 2</th>
    </tr>
</table>

而且我还添加了一些样式。

.tblTitle{
   position:absolute;
    top:0px;
    margin-bottom:30px;
    background:lightblue;
}
td, th{
    padding:5px;
    height:40px;
    width:40px;
    font-size:14px;
}

希望这就是你想要的:)


1
我需要右表的标题及其内容一起滚动。
panfil

这是URL:jsfiddle.net/C8Dtf/84。您只需要使用右侧表格的样式来对齐两个表格。
菲利普·胡安

不,你不太了解。我需要将右表的标题固定在顶部,以便在表上下滚动时仍然可见,但是当表向右或向左滚动时,标题必须向右或向左滚动,但仍固定在顶部。对不起,我的英语水平不好。
潘菲尔

因此,想要在垂直滚动时固定右侧表格的标题,而在水平滚动时固定右侧表格的标题?
菲利普·胡安

这就是例子,我要实现的行为:datatables.net/release-datatables/extras/FixedColumns/...
panfil

9

仅使用CSS的示例:

.table {
  table-layout: fixed;
  width: 500px;
  border-collapse: collapse;
}

.header th {
  font-family: Calibri;
  font-size: small;
  font-weight: lighter;
  border-left: 1px solid #000;
  background: #d0d0d0;
}

.body_panel {
  display: inline-block;
  width: 520px;
  height: 300px;
  overflow-y: scroll;
}

.body tr {
  border-bottom: 1px solid #d0d0d0;
}

.body td {
  border-left: 1px solid #d0d0d0;
  padding-left: 3px;
  font-family: Calibri;
  font-size: small;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
<body>

  <table class="table">

    <thead class="header">

      <tr>
        <th style="width:20%;">teste</th>
        <th style="width:30%;">teste 2</th>
        <th style="width:50%;">teste 3</th>
      </tr>

    </thead>
  </table>

  <div class="body_panel">

    <table class="table">
      <tbody class="body">

        <tr>
          <td style="width:20%;">asbkj k kajsb ksb kabkb</td>
          <td style="width:30%;">2</td>
          <td style="width:50%;">3</td>
        </tr>

        <tr>
          <td style="width:20%;">2</td>
          <td style="width:30%;">2</td>
          <td style="width:50%;">3</td>
        </tr>

        <tr>
          <td style="width:20%;">2</td>
          <td style="width:30%;">2</td>
          <td style="width:50%;">3</td>
        </tr>

        <tr>
          <td style="width:20%;">2</td>
          <td style="width:30%;">2</td>
          <td style="width:50%;">3</td>
        </tr>

        <tr>
          <td style="width:20%;">2</td>
          <td style="width:30%;">2</td>
          <td style="width:50%;">3</td>
        </tr>

        <tr>
          <td style="width:20%;">2</td>
          <td style="width:30%;">2</td>
          <td style="width:50%;">3</td>
        </tr>

        <tr>
          <td style="width:20%;">2</td>
          <td style="width:30%;">2</td>
          <td style="width:50%;">3</td>
        </tr>

        <tr>
          <td style="width:20%;">2</td>
          <td style="width:30%;">2</td>
          <td style="width:50%;">3</td>
        </tr>

        <tr>
          <td style="width:20%;">2</td>
          <td style="width:30%;">2</td>
          <td style="width:50%;">3</td>
        </tr>

        <tr>
          <td style="width:20%;">2</td>
          <td style="width:30%;">2</td>
          <td style="width:50%;">3</td>
        </tr>

        <tr>
          <td style="width:20%;">2</td>
          <td style="width:30%;">2</td>
          <td style="width:50%;">3</td>
        </tr>

        <tr>
          <td style="width:20%;">2</td>
          <td style="width:30%;">2</td>
          <td style="width:50%;">3</td>
        </tr>

        <tr>
          <td style="width:20%;">2</td>
          <td style="width:30%;">2</td>
          <td style="width:50%;">3</td>
        </tr>

        <tr>
          <td style="width:20%;">2</td>
          <td style="width:30%;">2</td>
          <td style="width:50%;">3</td>
        </tr>

        <tr>
          <td style="width:20%;">2</td>
          <td style="width:30%;">2</td>
          <td style="width:50%;">3</td>
        </tr>

        <tr>
          <td style="width:20%;">2</td>
          <td style="width:30%;">2</td>
          <td style="width:50%;">3</td>
        </tr>

        <tr>
          <td style="width:20%;">2</td>
          <td style="width:30%;">2</td>
          <td style="width:50%;">3</td>
        </tr>

        <tr>
          <td style="width:20%;">2</td>
          <td style="width:30%;">2</td>
          <td style="width:50%;">3</td>
        </tr>

      </tbody>
    </table>

  </div>

</body>


3
我不仅需要固定下来,还需要第一栏。
panfil

此示例显示了一种在html中包含两个表的方法:一个表仅呈现标头;另一个表仅呈现标头。第二个表仅呈现行,但在内执行div。是这样的div,它允许在标题停留在相同位置的同时进行行滚动。这种方法满足了我的需求。
David Tansey 2014年

如果也有水平滚动,则需要一些JS来同步表的滚动位置。
佐尔坦陶马希


3

我发现了Paul O'Brien针对此问题的出色解决方案,并希望共享链接:https : //codepen.io/paulobrien/pen/LBrMxa

我删除了页脚样式:

html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
.intro {
  max-width: 1280px;
  margin: 1em auto;
}
.table-scroll {
  position: relative;
  width:100%;
  z-index: 1;
  margin: auto;
  overflow: auto;
  height: 350px;
}
.table-scroll table {
  width: 100%;
  min-width: 1280px;
  margin: auto;
  border-collapse: separate;
  border-spacing: 0;
}
.table-wrap {
  position: relative;
}
.table-scroll th,
.table-scroll td {
  padding: 5px 10px;
  border: 1px solid #000;
}
.table-scroll thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

th:first-child {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 2;
  background: #ccc;
}
thead th:first-child {
  z-index: 5;
}

2

我最近不得不创建一个具有固定标题组和固定第一列的解决方案。我将表拆分为div,并使用jquery捕获了窗口滚动。

http://jsfiddle.net/TinT/EzXub/2346/

var prevTop = 0;
var prevLeft = 0;

$(window).scroll(function(event){
  var currentTop = $(this).scrollTop();
  var currentLeft = $(this).scrollLeft();

  if(prevLeft !== currentLeft) {
    prevLeft = currentLeft;
    $('.header').css({'left': -$(this).scrollLeft()})
  }
  if(prevTop !== currentTop) {
    prevTop = currentTop;
    $('.leftCol').css({'top': -$(this).scrollTop() + 40})
  }
});

1

我和一位同事刚刚发布了一个新的GitHub项目,该项目提供了一个Angular指令,您可以使用该指令用固定的标头来修饰表格:https : //github.com/objectcomputing/FixedHeader

它仅依赖于css和angular,带有添加一些div的指令。不需要jQuery。

此实现的功能不如其他某些实现完整,但是如果您仅需要添加固定表,我们认为这可能是个不错的选择。


1

经过两天的与Internet Explorer 9 + Chrome + Firefox(Windows)和Safari(Mac)的斗争,我发现了一个

  • 与所有这些浏览器兼容
  • 不使用JavaScript
  • 仅使用une div和一张表
  • 固定的页眉和页脚(IE除外),带有可滚动的正文。标头和正文具有相同的列宽

结果: 在此处输入图片说明

HTML:

  <thead>
    <tr>
      <th class="nombre"><%= f.label :cost_center %></th>
      <th class="cabecera cc">Personal</th>
      <th class="cabecera cc">Dpto</th>
    </tr>
  </thead>
  <tbody>
    <% @cost_centers.each do |cc| %>
    <tr>
      <td class="nombre"><%= cc.nombre_corto %></td>
      <td class="cc"><%= cc.cacentrocoste %></td>
      <td class="cc"><%= cc.cacentrocoste_dpto %></td>
    </tr>
    <% end %>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3"><a href="#">Mostrar mas usuarios</a></td>
    </tr>
  </tfoot>
</table>

CSS:

div.cost_center{
  width:320px;
  font-size:75%;
  margin-left:5px;
  margin-top:5px;
  margin-bottom: 2px;
  float: right;
  display: inline-block;
  overflow-y: auto;
  overflow-x: hidden;
  max-height:300px;  
}

div.cost_center label { 
  float:none;
  font-size:14px;
}

div.cost_center table{
  width:300px;
  border-collapse: collapse; 
  float:right;
  table-layout:fixed;
}

div.cost_center table tr{
  height:16px;
}
div.cost_center th{
  font-weight:normal;
}

div.cost_center table tbody{
  display: block;
  overflow: auto;
  max-height:240px;
}

div.cost_center table thead{
  display:block;
}

div.cost_center table tfoot{
  display:block;
}
div.cost_center table tfoot td{
  width:280px;
}
div.cost_center .cc{
  width:60px;
  text-align: center; 
  border: 1px solid #999;
}

div.cost_center .nombre{
  width:150px;
}
div.cost_center tbody .nombre{
  border: 1px solid #999;
}

div.cost_center table tfoot td{
 text-align:center;  
 border: 1px solid #999; 
} 

div.cost_center table th, 
div.cost_center table td { 
  padding: 2px;
  vertical-align: middle; 
}

div.cost_center table tbody td {
  white-space: normal;
  font:  .8em/1.4em Verdana, sans-serif;
  color: #000;
  background-color: white;
}
div.cost_center table th.cabecera { 
  font:  0.8em/1.4em Verdana, sans-serif;
  color: #000;
  background-color: #FFEAB5;
}

很好的尝试,但对我来说效果不佳。在此示例jsfiddle.net/5ka6e)中,标头未正确调整大小。这种错误最终可能导致数据和标头不匹配。
darkzangel 2014年

1
你忘了添加 div.cost_center table{border-collapse: collapse;}第三标题必须的东西,在60像素内的配合(在这个例子中)
阿尔伯特加泰罗尼亚语

1

现有的答案将适合大多数人,但是对于那些希望在固定标题下和第一(固定)列右侧添加阴影的人来说,这是一个有效的示例(纯CSS):

http://jsbin.com/nayifepaxo/1/edit?html,输出

使它起作用的主要技巧是在每个::after阴影中的每个阴影的右侧添加阴影:tdtr

tr td:first-child:after {
  box-shadow: 15px 0 15px -15px rgba(0, 0, 0, 0.05) inset;
  content: "";
  position:absolute;
  top:0;
  bottom:0;
  right:-15px;
  width:15px;
}

花了我一段时间(太长了...)才能使其全部正常工作,所以我认为我愿意与处于类似情况的人分享。


您是否基于其他人的答案并添加了阴影?
PussInBoots

1

需要修复页眉页脚


0

这样的事情可能对您有用...它可能会要求您为标题行设置列宽。

thead { 
    position: fixed;
}

http://jsfiddle.net/vkhNC/

更新:

我不相信您给出的示例仅可以通过CSS实现。我希望有人证明我做错了。 这是我到目前为止所拥有的。它不是最终产品,但可能是您的起点。希望无论您身在何处,这都能为您指明有用的方向。


我不仅需要标题,而且还需要固定第一列。
panfil

5
问题是页眉松开了宽度。不同的标题列大小和数据列大小看起来很丑。
Akash Kava 2013年


0

纯CSS示例:

<div id="cntnr">
    <div class="tableHeader">
        <table class="table-header table table-striped table-bordered">
            <thead>
                <tr>
                    <th>this</th>
                    <th>transmission</th>
                    <th>is</th>
                    <th>coming</th>
                    <th>to</th>
                    <th>you</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>we've got it...</td>
                    <td>alright you are go</td>
                    <td>uh, we see the Earth now</td>
                    <td>we've got it...</td>
                    <td>alright you are go</td>
                    <td>uh, we see the Earth now</td>
                </tr>
            </tbody>
        </table>
    </div>


    <div class="tableBody">
        <table class="table-body table table-striped table-bordered">
            <thead>
                <tr>
                    <th>this</th>
                    <th>transmission</th>
                    <th>is</th>
                    <th>coming</th>
                    <th>to</th>
                    <th>you</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>we've got it...</td>
                    <td>alright you are go</td>
                    <td>uh, we see the Earth now</td>
                    <td>we've got it...</td>
                    <td>alright you are go</td>
                    <td>uh, we see the Earth now</td>
                </tr>
            </tbody>
        </table>
    </div>

</div>

#cntnr {
    width: auto;
    height: 200px;
    border: solid 1px #444;
    overflow: auto;
}

.tableHeader {
    position: fixed;
    height: 40px;
    overflow: hidden;
    margin-right: 18px;
    background: white;
}

.table-header tbody {
    height: 0;
    visibility: hidden;
}

.table-body thead {
    height: 0;
    visibility: hidden;
}

http://jsfiddle.net/cCarlson/L98m854d/

缺点:固定的标头结构/逻辑相当依赖特定的维度,因此抽象可能不是一个可行的选择


需要固定的标题和固定的第一列。
panfil

啊...谢谢你指出这一点,潘菲尔。我将进行编辑。干杯
科迪

0

位置:粘性不适用于chrome中的(thead)元素和safari等其他Webkit浏览器。

但是它可以和(th)一起工作

body {
  background-color: rgba(0, 255, 200, 0.1);
}

.intro {
  color: rgb(228, 23, 23);
}

.wrapper {
  overflow-y: scroll;
  height: 300px;
}

.sticky {
  position: sticky;
  top: 0;
  color: black;
  background-color: white;
}
<div class="container intro">
  <h1>Sticky Table Header</h1>
  <p>Postion : sticky doesn't work for some elements like (thead) in chrome and other webkit browsers like safari. </p>
  <p>But it works fine with (th)</p>
</div>
<div class="container wrapper">
  <table class="table table-striped">
    <thead>
      <tr>
        <th class="sticky">Firstname</th>
        <th class="sticky">Lastname</th>
        <th class="sticky">Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>James</td>
        <td>Vince</td>
        <td>james@example.com</td>
      </tr>
      <tr>
        <td>Jonny</td>
        <td>Bairstow</td>
        <td>jonny@example.com</td>
      </tr>
      <tr>
        <td>James</td>
        <td>Anderson</td>
        <td>james@example.com</td>
      </tr>
      <tr>
        <td>Stuart</td>
        <td>Broad</td>
        <td>stuart@example.com</td>
      </tr>
      <tr>
        <td>Eoin</td>
        <td>Morgan</td>
        <td>eoin@example.com</td>
      </tr>
      <tr>
        <td>Joe</td>
        <td>Root</td>
        <td>joe@example.com</td>
      </tr>
      <tr>
        <td>Chris</td>
        <td>Woakes</td>
        <td>chris@example.com</td>
      </tr>
      <tr>
        <td>Liam</td>
        <td>PLunkett</td>
        <td>liam@example.com</td>
      </tr>
      <tr>
        <td>Jason</td>
        <td>Roy</td>
        <td>jason@example.com</td>
      </tr>
      <tr>
        <td>Alex</td>
        <td>Hales</td>
        <td>alex@example.com</td>
      </tr>
      <tr>
        <td>Jos</td>
        <td>Buttler</td>
        <td>jos@example.com</td>
      </tr>
      <tr>
        <td>Ben</td>
        <td>Stokes</td>
        <td>ben@example.com</td>
      </tr>
      <tr>
        <td>Jofra</td>
        <td>Archer</td>
        <td>jofra@example.com</td>
      </tr>
      <tr>
        <td>Mitchell</td>
        <td>Starc</td>
        <td>mitchell@example.com</td>
      </tr>
      <tr>
        <td>Aaron</td>
        <td>Finch</td>
        <td>aaron@example.com</td>
      </tr>
      <tr>
        <td>David</td>
        <td>Warner</td>
        <td>david@example.com</td>
      </tr>
      <tr>
        <td>Steve</td>
        <td>Smith</td>
        <td>steve@example.com</td>
      </tr>
      <tr>
        <td>Glenn</td>
        <td>Maxwell</td>
        <td>glenn@example.com</td>
      </tr>
      <tr>
        <td>Marcus</td>
        <td>Stoinis</td>
        <td>marcus@example.com</td>
      </tr>
      <tr>
        <td>Alex</td>
        <td>Carey</td>
        <td>alex@example.com</td>
      </tr>
      <tr>
        <td>Nathan</td>
        <td>Coulter Nile</td>
        <td>nathan@example.com</td>
      </tr>
      <tr>
        <td>Pat</td>
        <td>Cummins</td>
        <td>pat@example.com</td>
      </tr>
      <tr>
        <td>Adam</td>
        <td>Zampa</td>
        <td>zampa@example.com</td>
      </tr>
    </tbody>
  </table>
</div>

访问我的Codepen示例



-2

如果只想使用纯HTML和CSS,那么我为您提供了解决方案:
在此jsFiddle中,您可以看到一个非脚本解决方案,该解决方案为表提供了固定的标题。将标记也适合固定的第一列也不是问题。您只需要为hWrapper-div 内的第一列创建一个绝对定位的表,然后重新定位vWrapper-div。
使用服务器端或浏览器端的诱人引擎提供动态内容应该不是问题,我的解决方案在所有现代浏览器和从IE8开始的旧版浏览器中都可以很好地工作。


By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.