Question

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

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

我已经听了一些答案，但我仍然很困惑如何制作它。

我的HTML / CSS代码：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

冻结第一行

仅冻结第一行很简单，可以通过将表体设置为onItemSelector(value :any) { console.log(value); }并为表格单元格提供固定宽度来完成CSS。

＆＃13;

overflow: auto

＆＃13;

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

＆＃13;

冻结第一排＆amp;第一栏

但是，要为第一行和第一列获取此行为，您需要将第一行，第一列和第一个单元与表分开，然后根据滚动的位置连续设置这些元素的位置。桌面主体，滚动事件。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 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'来包装表格。

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

3 个答案:

冻结第一行

冻结第一排＆amp;第一栏