Html 纯css上具有固定标题和固定列的表

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

到目前为止，我看到的每个解决方案都使用Javascript或

jQuery

来设置scrollTop/scrollLeft，但它在移动浏览器上无法顺利工作，因此我正在寻找一个纯CSS解决方案

我在这里找到了一个固定列的解决方案：但我不知道如何增强它以使标题也固定

我希望它能在webkit浏览器上运行，或者使用一些

css3

功能，但我重复一遍，我不想使用

Javascript

进行滚动

---

编辑：这是我想要实现的行为示例：

类似的东西可能适合你。。。它可能需要您为标题行设置列宽

thead { 
    position: fixed;
}

更新：

---

我不相信您给出的示例仅使用CSS就可以实现。我希望有人能证明我错了。这不是成品，但对你来说可能是一个开始。我希望这能为您指明一个有用的方向，不管它在哪里。

我在JSFIDLE中做了一些更改。这可能就是你想要做的

我已将标题硬编码如下：

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

---

希望这就是你想要的：）

这绝非易事。

以下链接指向正在运行的演示：

根据lanoxx的评论更新链接

请记住添加以下内容：

<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。

---

这需要经历很多。希望这有帮助：）

另一个解决方案是使用AngularJS。AngularUI模块有一个名为

ng grid

的指令，该指令支持一个名为列固定的功能。它不是100%纯CSS，但其他解决方案也不是

---

仅使用CSS的示例：

.table{
表布局：固定；
宽度：500px；
边界塌陷：塌陷；
}
.标题th{
字体系列：Calibri；
字体大小：小；
字体重量：较轻；
左边框：1px实心#000；
背景：#d0；
}
.车身面板{
显示：内联块；
宽度：520px；
高度：300px；
溢出y：滚动；
}
.body tr{
边框底部：1px实心#d0；
}
.body td{
左边框：1px实心#d0；
左：3倍；
字体系列：Calibri；
字体大小：小；
溢出：隐藏；
空白：nowrap；
文本溢出：省略号；
}

睾丸
睾丸2
睾丸3
asbkj k kajsb ksb kabkb
2.
3.
2.
2.
3.
2.
2.
3.
2.
2.
3.
2.
2.
3.
2.
2.
3.
2.
2.
3.
2.
2.
3.
2.
2.
3.
2.
2.
3.
2.
2.
3.
2.
2.
3.
2.
2.
3.
2.
2.
3.
2.
2.
3.
2.
2.
3.
2.
2.
3.
2.
2.
3.

我和一位同事刚刚发布了一个新的GitHub项目，该项目提供了一个角度指令，您可以使用该指令用固定标题装饰您的表格：

它只依赖于css和angular，并带有一个添加一些div的指令。不需要jQuery

---

这个实现没有其他一些实现功能齐全，但如果您只需要添加固定表，我们认为这可能是一个不错的选择。

在与Internet Explorer 9+Chrome+Firefox（Windows）和Safari（Mac）进行了两天的斗争之后，我发现了一个

• 与所有这些浏览器兼容
• 不使用javascript
• 仅使用une div和一个表
• 固定页眉和页脚（IE除外），具有可滚动的正文。标题和正文具有相同的列宽

结果:

HTML:

---

如果您只想使用纯HTML和CSS，我有一个解决方案：
在这里，您可以看到一个非脚本解决方案，它提供了一个带有固定标题的表。 为固定的第一列调整标记也不应该是问题。 您只需为

hWrapper

-div内的第一列创建一个绝对定位表，并重新定位

vWrapper

-div。

---

使用服务器端或浏览器端诱人的引擎提供动态内容应该不是问题，我的解决方案适用于所有现代浏览器和IE8以后的旧浏览器。

要修复标题和列，可以使用以下插件：

---

于2019年7月更新

---

最近也出现了基于CSS属性

的位置：粘性

（有关它的更多详细信息）应用于每个

TH

项目（而不是它们的父容器）

我认为这将帮助您：

简而言之，如果您知道如何创建dataTable，只需在底部添加以下jQuery行：

$(document).ready(function() {
    var table = $('#example').DataTable();

    new $.fn.dataTable.FixedHeader( table, {
        bottom: true
    } );
} );

---

bottom:true//用于修复底部标题。

所有这些建议都很好，但它们要么只是修复标题或列，而不是两者都修复，要么使用javascript。原因是-它不相信它可以在纯CSS中完成。原因是:

如果有可能的话，您需要将几个可滚动div一个嵌套在另一个中，每个都有

  <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>

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;
}

$(document).ready(function() {
    var table = $('#example').DataTable();

    new $.fn.dataTable.FixedHeader( table, {
        bottom: true
    } );
} );

<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;
}

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})
  }
});

<table style="position: relative;">
   <thead>
      <thead>
        <tr>
           <th></th>
        </tr>
      </thead>
   </thead>
   <tbody style="position: absolute;height: 300px;overflow:auto;">
      <tr>
         <td></td>
      </tr>
   </tbody>
</table>

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

div.container {
  overflow: scroll;
}

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

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

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

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;
}