css让表格第一列和第一行固定

Posted 2023-04-09

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css让表格第一列和第一行固定相关的知识，希望对你有一定的参考价值。

用css让表格左右移动滚动条的时候第一列固定，上下移动滚动条的时候第一行固定。并且浏览器兼容，麻烦提供全网页代码。

参考技术A 给你提供个思路：
第一行为一行多列的表格；
第一列为一列多行的表格；
剩下就是一个表格了。
然后把这些表格都放在一个div里面，并设置其样式追问

只能用一个表格。请提供源码。谢谢~！

参考技术B 相当于Excel的冻结。CSS不能实现这样的功能，尤其当表格的行列数非常多的时候不可能。参考技术C

你可以让第一列第一行单独拿出来，然后下面是一个表格。

下面是我之前做的一个例子，你自己修改下就可以了兼容IE6。

追问

只能在同一个表格中，你这个只实现了上下移动，左右移动的时候，第一行是不动的，并且兼容浏览器。

追答

左右移动什么意思？
第一行是不动的的话怎么移动，请用专业术语说清楚，谢谢。

追问

就比如excel图片，我拖动上下移动滚动条的时候，第一行冻结，我拖动左右移动的滚动条时，A列冻结。这样清楚吗？

冻结表格的第一行和第一列

【中文标题】冻结表格的第一行和第一列【英文标题】：Freeze first row and first column of table 【发布时间】：2017-12-17 16:09:01 【问题描述】：

我正在尝试冻结/锁定表格的第一行和第一列。

我试过给theadposition: absolute;或position: fixed;，但看起来很奇怪。

我已经遵循了一些答案，但我仍然对如何制作它感到困惑。

我的 HTML/CSS 代码：

th     
   font-size: 80%;
   text-align: center;

td 
   font-size : 65%;
   white-space: pre;
   text-align: center;

.inner 
   overflow-x: scroll;
   overflow-y: scroll;
   width: 300px;
   height: 100px;

input 
   font-size : 65%;

<body>
  <div class="inner">
    <form method="POST" action="dashboard">
      <table class="table table-bordered">
        <thead>
          <tr>
            <th>ID</th>
            <th>Tanggal</th>
            <th>Judul Pekerjaan</th>
            <th>Deskripsi</th>
            <th>Level</th>
            <th>Category</th>
            <th>Severity</th>
          </tr>
        </thead>
    </form>
        <tbody>
          <tr>
            <td>1</td>
            <td>1 May 2017</td>
            <td>Satu</td>
            <td>Satu</td>
          </tr>
          <tr>
            <td>2</td>
            <td>2 May 2017</td>
            <td>Dua</td>
            <td>Dua</td>
          </tr>
          <tr>
            <td>3</td>
            <td>3 May 2017</td>
            <td>Tiga</td>
            <td>Tiga</td>
          </tr>
          <tr>
            <td>3</td>
            <td>3 May 2017</td>
            <td>Tiga</td>
            <td>Tiga</td>
          </tr>
        </tbody>
      </table>
  </div>
</body>

【问题讨论】：

冻结第一行第一列是什么意思？？？ @Sujith 我的意思是锁定。简单的方法是使用插件。jqueryscript.net/table/… @NaveenDA 这是一个不错的选择。该插件唯一没有考虑的是第一个单元格（在演示中 - Ano），一旦您开始向任一方向滚动，它就会滚动到视线之外。这是我的插件，看看我的演示naveenda.github.io/tablenav 【参考方案1】：

冻结第一行

冻结第一行可以通过将表格主体设置为overflow: auto，并为表格单元格提供固定宽度来完成。 （见示例 1）

冻结第一行和第一列

但是，要使第一行和第一列都具有这种行为，您需要将表格的第一行、第一列和第一个单元格分开，然后不断设置它们的位置滚动事件时，基于表格主体的滚动位置的元素。 （见示例 2）

示例 1：（仅冻结第一行）

table thead tr 
    display: block;

table th, table td 
    width: 80px;

table tbody 
    display: block;
    height: 90px;
    overflow: auto;

th 
    text-align: center;

td 
    text-align: center;
    white-space: pre;

<table class="table table-bordered">
  <thead>
    <tr>
      <th>ID</th>
      <th>Tanggal</th>
      <th>Judul Pekerjaan</th>
      <th>Deskripsi</th>
      <th>Level</th>
      <th>Category</th>
      <th>Severity</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>1</td>
      <td>1 May 2017</td>
      <td>Satu</td>
      <td>Satu</td>
    </tr>
    <tr>
      <td>2</td>
      <td>2 May 2017</td>
      <td>Dua</td>
      <td>Dua</td>
    </tr>
    <tr>
      <td>3</td>
      <td>3 May 2017</td>
      <td>Tiga</td>
      <td>Tiga</td>
    </tr>
    <tr>
      <td>3</td>
      <td>3 May 2017</td>
      <td>Tiga</td>
      <td>Tiga</td>
    </tr>
    <tr>
      <td>2</td>
      <td>2 May 2017</td>
      <td>Dua</td>
      <td>Dua</td>
    </tr>
    <tr>
      <td>3</td>
      <td>3 May 2017</td>
      <td>Tiga</td>
      <td>Tiga</td>
    </tr>
    <tr>
      <td>3</td>
      <td>3 May 2017</td>
      <td>Tiga</td>
      <td>Tiga</td>
    </tr>
  </tbody>
</table>

示例 2：（冻结第一行和第一列）

$(document).ready(function() 
  $('tbody').scroll(function(e)  
    $('thead').css("left", -$("tbody").scrollLeft());
    $('thead th:nth-child(1)').css("left", $("tbody").scrollLeft()-5); 
    $('tbody td:nth-child(1)').css("left", $("tbody").scrollLeft()-5); 
  );
);

body 
  margin: 0;

th, td 
    text-align: center;
    background-color: white

table 
  position: relative;
  width: 400px;
  overflow: hidden;

thead 
  position: relative;
  display: block;
  width: 400px;
  overflow: visible;

thead th 
  min-width: 80px;
  height: 40px;

thead th:nth-child(1) 
  position: relative;
  display: block;
  height: 40px;
  padding-top: 20px;

tbody 
  position: relative;
  display: block;
  width: 400px;
  height: 90px;
  overflow: scroll;

tbody td 
  min-width: 80px;

tbody tr td:nth-child(1) 
  position: relative;
  display: block;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered">
  <thead>
    <tr>
      <th>ID</th>
      <th>Tanggal</th>
      <th>Judul Pekerjaan</th>
      <th>Deskripsi</th>
      <th>Level</th>
      <th>Category</th>
      <th>Severity</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>1</td>
      <td>1 May 2017</td>
      <td>Satu</td>
      <td>Satu</td>
      <td>5</td>
      <td>Lorem</td>
      <td>Ipsum</td>
    </tr>
    <tr>
      <td>2</td>
      <td>2 May 2017</td>
      <td>Dua</td>
      <td>Dua</td>
    </tr>
    <tr>
      <td>3</td>
      <td>3 May 2017</td>
      <td>Tiga</td>
      <td>Tiga</td>
    </tr>
    <tr>
      <td>3</td>
      <td>3 May 2017</td>
      <td>Tiga</td>
      <td>Tiga</td>
    </tr>
    <tr>
      <td>2</td>
      <td>2 May 2017</td>
      <td>Dua</td>
      <td>Dua</td>
    </tr>
    <tr>
      <td>3</td>
      <td>3 May 2017</td>
      <td>Tiga</td>
      <td>Tiga</td>
    </tr>
    <tr>
      <td>3</td>
      <td>3 May 2017</td>
      <td>Tiga</td>
      <td>Tiga</td>
    </tr>
  </tbody>
</table>

【讨论】：

是的，它有效。但我也需要锁定 ID 列。我该怎么办？您可以将第一列单元格定位为绝对单元格，确保高度与非绝对单元格相同的最简单方法是再次模拟该列。由于您的第一列是绝对的，因此模仿的列将落后于它，您将永远看不到它。在这种情况下，您的表格需要显示所有行，因为您的第一列被冻结，所以您不能有隐藏的行，如果您有隐藏的行，那么当您向下滚动查看时，您的第一列将与右侧的内容不匹配其他隐藏行 @ZulfikarSandyPratama 使用纯 CSS 是不可能实现的。如果您对 JavaScript/jQuery 解决方案持开放态度，请将这些标签添加到您的问题中，以便我可以使用可行的解决方案更新我的答案。 @ChavaG 是的，我已经添加了 js 和 jquery 标签 @ChavaG 它解决了这个问题。谢谢你的回答！【参考方案2】：

如果有人遇到这样的问题，这里有一个针对现代浏览器的解决方案，无需使用 jQuery 甚至 JS - 只需纯 HTML 和 CSS。诀窍是将表格设置为相对位置，将第一行和/或列单元格设置为粘性位置。我明确地添加了背景颜色和 z-index 值以产生这种重叠的感觉。

.wrapper 
  overflow: auto;
  height: 100px;
  width: 200px;


table 
  position: relative;
  border-collapse: separate;
  border-spacing: 0;


table th,
table td 
  width: 50px;
  padding: 5px;
  background-color: white;


table tbody 
  height: 90px;


table th 
  text-align: center;
  position: sticky;
  top: 0;
  z-index: 2;


table th:nth-child(1) 
  left: 0;
  z-index: 3;


table td 
  text-align: center;
  white-space: pre;


table tbody tr td:nth-child(1) 
  position: sticky;
  left: 0;
  z-index: 1;

<div class="wrapper">
  <table class="table table-bordered">
    <thead>
      <tr>
        <th>Id</th>
        <th>Name</th>
        <th>Age</th>
        <th>Country</th>
        <th>Hobbies</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>1</td>
        <td>George</td>
        <td>43</td>
        <td>New Zealand</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Ann</td>
        <td>25</td>
        <td>Great Britain</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Alexander</td>
        <td>41</td>
        <td>Spain</td>
      </tr>
      <tr>
        <td>4</td>
        <td>Wasilij</td>
        <td>63</td>
        <td>Ukraine</td>
      </tr>
      <tr>
        <td>1</td>
        <td>George</td>
        <td>43</td>
        <td>New Zealand</td>
      </tr>
      <tr>
        <td>1</td>
        <td>George</td>
        <td>43</td>
        <td>New Zealand</td>
      </tr>
      <tr>
        <td>1</td>
        <td>George</td>
        <td>43</td>
        <td>New Zealand</td>
      </tr>
    </tbody>
  </table>
</div>

【讨论】：

【参考方案3】：

我昨天和我的同事一起解决了这个问题。改编后的 CSS 是：

.pcvBody 
  overflow-x: auto;
  width: calc(100vw - 110px);


/* CSS START for freezing table column*/
#prodTable 
  position: relative;
  overflow: hidden;

#prodTable thead 
  position: relative;
  display: block;
  overflow: visible;

#prodTable thead th 
  min-width: 150px;
  width: 1000px;

#prodTable thead th:nth-child(1), #prodTable thead th:nth-child(2) 
  position: relative;
  /*display: block;*/
  max-width: 150px;
  width: 50px;
  border-left: 1px solid #ededed;

#prodTable tbody 
  position: relative;
  display: block;


#prodTable tbody td 
  min-width: 150px;
  width: 1000px;

#prodTable tbody input 
  max-width: 120px;

#prodTable tbody tr td:nth-child(1), #prodTable tbody tr td:nth-child(2) 
  position: relative;
  /*display: block;*/
  background-color: white;
  min-height: 20px;
  max-width: 150px;
  width: 50px;
  border-left: 1px solid #ededed;

/* CSS END for freezing table column*/

而调整后的滚动事件为：

$('#pcvBody').scroll(function(e) 
  var scrollLeft = $("#pcvBody").scrollLeft();
  //$('#prodTable thead').css("left", -tbodyScrollLeft);
  //$('#prodTable thead th:nth-child(1)').css("left", tbodyScrollLeft - 5); 
  //$('#prodTable tbody td:nth-child(1)').css("left", tbodyScrollLeft - 5); 
  $('#prodTable thead th:nth-child(1)').css("left", scrollLeft); 
  $('#prodTable tbody td:nth-child(1)').css("left", scrollLeft); 
  $('#prodTable thead th:nth-child(2)').css("left", scrollLeft);
  $('#prodTable tbody td:nth-child(2)').css("left", scrollLeft);
);

此外，我添加了一个“div”来包裹表格。

【讨论】：

以上是关于css让表格第一列和第一行固定的主要内容，如果未能解决你的问题，请参考以下文章

react-native-table-component 冻结可滚动表中的第一列和第一行

CSS表格中第一行和第一列的每个单元格的不同背景颜色

如何使用 SQL 查找表中的第一列和第一行

滚动时如何锁定表格的第一行和第一列，可能使用 JavaScript 和 CSS？

如何在熊猫中设置第一列和第一行作为索引？

c# listView1写入第一行第一列