固定第一行和第一列使html表格可滚动

【问题标题】：Making html table scrollable with first row and column fixed固定第一行和第一列使html表格可滚动
【发布时间】：2020-07-24 20:40:02
【问题描述】：

我想通过修复第一行和第一列使我的 html 表格可滚动

我在下面提到的 stackoverflow 问题中尝试了各种答案，但没有一个给出正确的结果，或者他们改变了我原来的 css 设计

Freeze first row and first column of table

How can I lock the first row and first column of a table when scrolling, possibly using JavaScript and CSS?

如何通过维护我原来的 css 表格设计来实现这一点？我是 CSS 新手，所以我无法做到这一点。

我的 HTML/CSS 代码：

html {
  line-height: 1.5;
  font-family: Lato, sans-serif;
  font-weight: normal;
  font-size: 14px;
  color: #212121;
}

body {
  background: #fafafa;
  margin: 0px;
}

html,
body,
{
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.container {
  max-width: 1280px;
  width: 100%;
  position: relative;
  margin: 0 auto;
}

.checkBox {
  width: 100%;
  margin: 12px 0px;
  border: solid 1px #dcdcdc;
  border-radius: 4px;
}

.checkBox thead tr {
  background-color: #ddd;
}

.checkBox thead tr th {
  text-transform: uppercase;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 1px;
  text-align: left;
  color: #7a7a7a;
}

.checkBox tbody tr th {
  text-align: left;
  padding: 4px 12px;
}

.checkBox tbody tr {
  background: #fff;
}

.checkBox tbody tr:nth-child(even) {
  background: #f6f6f6;
}

.checkBox tbody tr td {
  padding: 0 8px;
}
<!DOCTYPE html>
<html>

<head>
  <title>sample</title>
  <meta charset="utf-8" http-equiv="refresh" content="300">
  <link href="https://fonts.googleapis.com/css?family=Lato&display=block" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="css/style.css">
</head>

<body>
  <div class="container">
    <table class="checkBox">
      <thead>
        <tr>
          <th>Name</th>
          <th>user1</th>
          <th>user2</th>
          <th>user3</th>
          <th>user4</th>
          <th>user5</th>
          <th>user6</th>
          <th>user7</th>
          <th>user8</th>
          <th>user9</th>
          <th>user10</th>
          <th>user11</th>
          <th>user12</th>
          <th>user13</th>
        </tr>
      </thead>
      <tbody>
        <tr id='row1'>
          <th span='col'>row1</th>
          <td id='user1'></td>
          <td id='user2'></td>
          <td id='user3'></td>
          <td id='user4'></td>
          <td id='user5'></td>
          <td id='user6'></td>
          <td id='user7'></td>
          <td id='user8'></td>
          <td id='user9'></td>
          <td id='user10'></td>
          <td id='user11'></td>
          <td id='user12'></td>
          <td id='user13'></td>
        </tr>
        <tr id='row2'>
          <th span='col'>row2</th>
          <td id='user1'></td>
          <td id='user2'></td>
          <td id='user3'></td>
          <td id='user4'></td>
          <td id='user5'></td>
          <td id='user6'></td>
          <td id='user7'></td>
          <td id='user8'></td>
          <td id='user9'></td>
          <td id='user10'></td>
          <td id='user11'></td>
          <td id='user12'></td>
          <td id='user13'></td>
        </tr>
        <tr id='row3'>
          <th span='col'>row3</th>
          <td id='user1'></td>
          <td id='user2'></td>
          <td id='user3'></td>
          <td id='user4'></td>
          <td id='user5'></td>
          <td id='user6'></td>
          <td id='user7'></td>
          <td id='user8'></td>
          <td id='user9'></td>
          <td id='user10'></td>
          <td id='user11'></td>
          <td id='user12'></td>
          <td id='user13'></td>
        </tr>
        <tr id='row4'>
          <th span='col'>row4</th>
          <td id='user1'></td>
          <td id='user2'></td>
          <td id='user3'></td>
          <td id='user4'></td>
          <td id='user5'></td>
          <td id='user6'></td>
          <td id='user7'></td>
          <td id='user8'></td>
          <td id='user9'></td>
          <td id='user10'></td>
          <td id='user11'></td>
          <td id='user12'></td>
          <td id='user13'></td>
        </tr>
        <tr id='row5'>
          <th span='col'>row5</th>
          <td id='user1'></td>
          <td id='user2'></td>
          <td id='user3'></td>
          <td id='user4'></td>
          <td id='user5'></td>
          <td id='user6'></td>
          <td id='user7'></td>
          <td id='user8'></td>
          <td id='user9'></td>
          <td id='user10'></td>
          <td id='user11'></td>
          <td id='user12'></td>
          <td id='user13'></td>
        </tr>
        <tr id='row6'>
          <th span='col'>row6</th>
          <td id='user1'></td>
          <td id='user2'></td>
          <td id='user3'></td>
          <td id='user4'></td>
          <td id='user5'></td>
          <td id='user6'></td>
          <td id='user7'></td>
          <td id='user8'></td>
          <td id='user9'></td>
          <td id='user10'></td>
          <td id='user11'></td>
          <td id='user12'></td>
          <td id='user13'></td>
        </tr>
        <tr id='row7'>
          <th span='col'>row7</th>
          <td id='user1'></td>
          <td id='user2'></td>
          <td id='user3'></td>
          <td id='user4'></td>
          <td id='user5'></td>
          <td id='user6'></td>
          <td id='user7'></td>
          <td id='user8'></td>
          <td id='user9'></td>
          <td id='user10'></td>
          <td id='user11'></td>
          <td id='user12'></td>
          <td id='user13'></td>
        </tr>
        <tr id='row8'>
          <th span='col'>row8</th>
          <td id='user1'></td>
          <td id='user2'></td>
          <td id='user3'></td>
          <td id='user4'></td>
          <td id='user5'></td>
          <td id='user6'></td>
          <td id='user7'></td>
          <td id='user8'></td>
          <td id='user9'></td>
          <td id='user10'></td>
          <td id='user11'></td>
          <td id='user12'></td>
          <td id='user13'></td>
        </tr>
        <tr id='row9'>
          <th span='col'>row9</th>
          <td id='user1'></td>
          <td id='user2'></td>
          <td id='user3'></td>
          <td id='user4'></td>
          <td id='user5'></td>
          <td id='user6'></td>
          <td id='user7'></td>
          <td id='user8'></td>
          <td id='user9'></td>
          <td id='user10'></td>
          <td id='user11'></td>
          <td id='user12'></td>
          <td id='user13'></td>
        </tr>
        <tr id='row10'>
          <th span='col'>row10</th>
          <td id='user1'></td>
          <td id='user2'></td>
          <td id='user3'></td>
          <td id='user4'></td>
          <td id='user5'></td>
          <td id='user6'></td>
          <td id='user7'></td>
          <td id='user8'></td>
          <td id='user9'></td>
          <td id='user10'></td>
          <td id='user11'></td>
          <td id='user12'></td>
          <td id='user13'></td>
        </tr>
        <tr id='row11'>
          <th span='col'>row11</th>
          <td id='user1'></td>
          <td id='user2'></td>
          <td id='user3'></td>
          <td id='user4'></td>
          <td id='user5'></td>
          <td id='user6'></td>
          <td id='user7'></td>
          <td id='user8'></td>
          <td id='user9'></td>
          <td id='user10'></td>
          <td id='user11'></td>
          <td id='user12'></td>
          <td id='user13'></td>
        </tr>
        <tr id='row12'>
          <th span='col'>row12</th>
          <td id='user1'></td>
          <td id='user2'></td>
          <td id='user3'></td>
          <td id='user4'></td>
          <td id='user5'></td>
          <td id='user6'></td>
          <td id='user7'></td>
          <td id='user8'></td>
          <td id='user9'></td>
          <td id='user10'></td>
          <td id='user11'></td>
          <td id='user12'></td>
          <td id='user13'></td>
        </tr>
        <tr id='row13'>
          <th span='col'>row13</th>
          <td id='user1'></td>
          <td id='user2'></td>
          <td id='user3'></td>
          <td id='user4'></td>
          <td id='user5'></td>
          <td id='user6'></td>
          <td id='user7'></td>
          <td id='user8'></td>
          <td id='user9'></td>
          <td id='user10'></td>
          <td id='user11'></td>
          <td id='user12'></td>
          <td id='user13'></td>
        </tr>
        <tr id='row14'>
          <th span='col'>row14</th>
          <td id='user1'></td>
          <td id='user2'></td>
          <td id='user3'></td>
          <td id='user4'></td>
          <td id='user5'></td>
          <td id='user6'></td>
          <td id='user7'></td>
          <td id='user8'></td>
          <td id='user9'></td>
          <td id='user10'></td>
          <td id='user11'></td>
          <td id='user12'></td>
          <td id='user13'></td>
        </tr>
        <tr id='row15'>
          <th span='col'>row15</th>
          <td id='user1'></td>
          <td id='user2'></td>
          <td id='user3'></td>
          <td id='user4'></td>
          <td id='user5'></td>
          <td id='user6'></td>
          <td id='user7'></td>
          <td id='user8'></td>
          <td id='user9'></td>
          <td id='user10'></td>
          <td id='user11'></td>
          <td id='user12'></td>
          <td id='user13'></td>
        </tr>
        <tr id='row16'>
          <th span='col'>row16</th>
          <td id='user1'></td>
          <td id='user2'></td>
          <td id='user3'></td>
          <td id='user4'></td>
          <td id='user5'></td>
          <td id='user6'></td>
          <td id='user7'></td>
          <td id='user8'></td>
          <td id='user9'></td>
          <td id='user10'></td>
          <td id='user11'></td>
          <td id='user12'></td>
          <td id='user13'></td>
        </tr>
        <tr id='row17'>
          <th span='col'>row17</th>
          <td id='user1'></td>
          <td id='user2'></td>
          <td id='user3'></td>
          <td id='user4'></td>
          <td id='user5'></td>
          <td id='user6'></td>
          <td id='user7'></td>
          <td id='user8'></td>
          <td id='user9'></td>
          <td id='user10'></td>
          <td id='user11'></td>
          <td id='user12'></td>
          <td id='user13'></td>
        </tr>
        <tr id='row18'>
          <th span='col'>row18</th>
          <td id='user1'></td>
          <td id='user2'></td>
          <td id='user3'></td>
          <td id='user4'></td>
          <td id='user5'></td>
          <td id='user6'></td>
          <td id='user7'></td>
          <td id='user8'></td>
          <td id='user9'></td>
          <td id='user10'></td>
          <td id='user11'></td>
          <td id='user12'></td>
          <td id='user13'></td>
        </tr>
        <tr id='row19'>
          <th span='col'>row19</th>
          <td id='user1'></td>
          <td id='user2'></td>
          <td id='user3'></td>
          <td id='user4'></td>
          <td id='user5'></td>
          <td id='user6'></td>
          <td id='user7'></td>
          <td id='user8'></td>
          <td id='user9'></td>
          <td id='user10'></td>
          <td id='user11'></td>
          <td id='user12'></td>
          <td id='user13'></td>
        </tr>
        <tr id='row20'>
          <th span='col'>row20</th>
          <td id='user1'></td>
          <td id='user2'></td>
          <td id='user3'></td>
          <td id='user4'></td>
          <td id='user5'></td>
          <td id='user6'></td>
          <td id='user7'></td>
          <td id='user8'></td>
          <td id='user9'></td>
          <td id='user10'></td>
          <td id='user11'></td>
          <td id='user12'></td>
          <td id='user13'></td>
        </tr>
        <tr id='row21'>
          <th span='col'>row21</th>
          <td id='user1'></td>
          <td id='user2'></td>
          <td id='user3'></td>
          <td id='user4'></td>
          <td id='user5'></td>
          <td id='user6'></td>
          <td id='user7'></td>
          <td id='user8'></td>
          <td id='user9'></td>
          <td id='user10'></td>
          <td id='user11'></td>
          <td id='user12'></td>
          <td id='user13'></td>
        </tr>
        <tr id='row22'>
          <th span='col'>row22</th>
          <td id='user1'></td>
          <td id='user2'></td>
          <td id='user3'></td>
          <td id='user4'></td>
          <td id='user5'></td>
          <td id='user6'></td>
          <td id='user7'></td>
          <td id='user8'></td>
          <td id='user9'></td>
          <td id='user10'></td>
          <td id='user11'></td>
          <td id='user12'></td>
          <td id='user13'></td>
        </tr>
        <tr id='row23'>
          <th span='col'>row23</th>
          <td id='user1'></td>
          <td id='user2'></td>
          <td id='user3'></td>
          <td id='user4'></td>
          <td id='user5'></td>
          <td id='user6'></td>
          <td id='user7'></td>
          <td id='user8'></td>
          <td id='user9'></td>
          <td id='user10'></td>
          <td id='user11'></td>
          <td id='user12'></td>
          <td id='user13'></td>
        </tr>
        <tr id="row24">
          <th span='col'>row24</th>
          <td id='user1'></td>
          <td id='user2'></td>
          <td id='user3'></td>
          <td id='user4'></td>
          <td id='user5'></td>
          <td id='user6'></td>
          <td id='user7'></td>
          <td id='user8'></td>
          <td id='user9'></td>
          <td id='user10'></td>
          <td id='user11'></td>
          <td id='user12'></td>
          <td id='user13'></td>
        </tr>
        <tr id='row25'>
          <th span='col'>row25</th>
          <td id='user1'></td>
          <td id='user2'></td>
          <td id='user3'></td>
          <td id='user4'></td>
          <td id='user5'></td>
          <td id='user6'></td>
          <td id='user7'></td>
          <td id='user8'></td>
          <td id='user9'></td>
          <td id='user10'></td>
          <td id='user11'></td>
          <td id='user12'></td>
          <td id='user13'></td>
        </tr>
        <tr id='row26'>
          <th span='col'>row26</th>
          <td id='user1'></td>
          <td id='user2'></td>
          <td id='user3'></td>
          <td id='user4'></td>
          <td id='user5'></td>
          <td id='user6'></td>
          <td id='user7'></td>
          <td id='user8'></td>
          <td id='user9'></td>
          <td id='user10'></td>
          <td id='user11'></td>
          <td id='user12'></td>
          <td id='user13'></td>
        </tr>
        <tr id='row27'>
          <th span='col'>row27</th>
          <td id='user1'></td>
          <td id='user2'></td>
          <td id='user3'></td>
          <td id='user4'></td>
          <td id='user5'></td>
          <td id='user6'></td>
          <td id='user7'></td>
          <td id='user8'></td>
          <td id='user9'></td>
          <td id='user10'></td>
          <td id='user11'></td>
          <td id='user12'></td>
          <td id='user13'></td>
        </tr>
      </tbody>
    </table>
  </div>
</body>

</html>

【问题讨论】：

    标签： javascript html css


    【解决方案1】：

    您可以这样做（全屏查看以获得良好的可视化效果）：

    $(document).ready(function() {
  $('tbody').scroll(function(e) { //detect a scroll event on the tbody  	
    $('thead').css("left", -$("tbody").scrollLeft()); //fix the thead relative to the body scrolling
    $('thead th:nth-child(1)').css("left", $("tbody").scrollLeft()); //fix the first cell of the header
    $('tbody td:nth-child(1)').css("left", $("tbody").scrollLeft()); //fix the first column of tdbody
  });
});
    table {
  position: relative;
  width: 900px;
  background-color: #aaa;
  overflow: hidden;
  border-collapse: collapse;
}


/*thead*/

thead {
  position: relative;
  display: block;
  width: 900px;
  overflow: visible;
}

thead th {
  background-color: #99a;
  min-width: 120px;
  height: 32px;
  border: 1px solid #222;
}

thead th:nth-child(1) {
  /*first cell in the header*/
  position: relative;
  display: block;
  /*seperates the first cell in the header from the header*/
  background-color: #88b;
}


/*tbody*/

tbody {
  position: relative;
  display: block;
  width: 900px;
  height: 239px;
  overflow: scroll;
}

tbody td {
  background-color: #bbc;
  min-width: 120px;
  border: 1px solid #222;
}

tbody tr td:nth-child(1) {
  position: relative;
  display: block;
  height: 40px;
  background-color: #99a;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<head>
  <title>sample</title>
  <meta charset="utf-8" http-equiv="refresh" content="300">
  <link href="https://fonts.googleapis.com/css?family=Lato&display=block" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="css/style.css">
</head>

<body>
  <div class="container">
    <table class="checkBox">
      <thead>
        <tr>

          <th>Name</th>
          <th>user1</th>
          <th>user2</th>
          <th>user3</th>
          <th>user4</th>
          <th>user5</th>
          <th>user6</th>
          <th>user7</th>
          <th>user8</th>
          <th>user9</th>
          <th>user10</th>
          <th>user11</th>
          <th>user12</th>
          <th>user13</th>
        </tr>
      </thead>
      <tbody>
        <tr id='row1'>
          <td>row1</td>
          <td id='user1'></td>
          <td id='user2'></td>
          <td id='user3'></td>
          <td id='user4'></td>
          <td id='user5'></td>
          <td id='user6'></td>
          <td id='user7'></td>
          <td id='user8'></td>
          <td id='user9'></td>
          <td id='user10'></td>
          <td id='user11'></td>
          <td id='user12'></td>
          <td id='user13'></td>
        </tr>
        <tr id='row2'>
          <td>row2</td>
          <td id='user1'></td>
          <td id='user2'></td>
          <td id='user3'></td>
          <td id='user4'></td>
          <td id='user5'></td>
          <td id='user6'></td>
          <td id='user7'></td>
          <td id='user8'></td>
          <td id='user9'></td>
          <td id='user10'></td>
          <td id='user11'></td>
          <td id='user12'></td>
          <td id='user13'></td>
        </tr>
        <tr id='row3'>
          <td>row3</td>
          <td id='user1'></td>
          <td id='user2'></td>
          <td id='user3'></td>
          <td id='user4'></td>
          <td id='user5'></td>
          <td id='user6'></td>
          <td id='user7'></td>
          <td id='user8'></td>
          <td id='user9'></td>
          <td id='user10'></td>
          <td id='user11'></td>
          <td id='user12'></td>
          <td id='user13'></td>
        </tr>
        <tr id='row4'>
          <td>row4</td>
          <td id='user1'></td>
          <td id='user2'></td>
          <td id='user3'></td>
          <td id='user4'></td>
          <td id='user5'></td>
          <td id='user6'></td>
          <td id='user7'></td>
          <td id='user8'></td>
          <td id='user9'></td>
          <td id='user10'></td>
          <td id='user11'></td>
          <td id='user12'></td>
          <td id='user13'></td>
        </tr>
        <tr id='row5'>
          <td>row5</td>
          <td id='user1'></td>
          <td id='user2'></td>
          <td id='user3'></td>
          <td id='user4'></td>
          <td id='user5'></td>
          <td id='user6'></td>
          <td id='user7'></td>
          <td id='user8'></td>
          <td id='user9'></td>
          <td id='user10'></td>
          <td id='user11'></td>
          <td id='user12'></td>
          <td id='user13'></td>
        </tr>
        <tr id='row6'>
          <td>row6</td>
          <td id='user1'></td>
          <td id='user2'></td>
          <td id='user3'></td>
          <td id='user4'></td>
          <td id='user5'></td>
          <td id='user6'></td>
          <td id='user7'></td>
          <td id='user8'></td>
          <td id='user9'></td>
          <td id='user10'></td>
          <td id='user11'></td>
          <td id='user12'></td>
          <td id='user13'></td>
        </tr>
        <tr id='row7'>
          <td>row7</td>
          <td id='user1'></td>
          <td id='user2'></td>
          <td id='user3'></td>
          <td id='user4'></td>
          <td id='user5'></td>
          <td id='user6'></td>
          <td id='user7'></td>
          <td id='user8'></td>
          <td id='user9'></td>
          <td id='user10'></td>
          <td id='user11'></td>
          <td id='user12'></td>
          <td id='user13'></td>
        </tr>
        <tr id='row8'>
          <td>row8</td>
          <td id='user1'></td>
          <td id='user2'></td>
          <td id='user3'></td>
          <td id='user4'></td>
          <td id='user5'></td>
          <td id='user6'></td>
          <td id='user7'></td>
          <td id='user8'></td>
          <td id='user9'></td>
          <td id='user10'></td>
          <td id='user11'></td>
          <td id='user12'></td>
          <td id='user13'></td>
        </tr>
        <tr id='row9'>
          <td>row9</td>
          <td id='user1'></td>
          <td id='user2'></td>
          <td id='user3'></td>
          <td id='user4'></td>
          <td id='user5'></td>
          <td id='user6'></td>
          <td id='user7'></td>
          <td id='user8'></td>
          <td id='user9'></td>
          <td id='user10'></td>
          <td id='user11'></td>
          <td id='user12'></td>
          <td id='user13'></td>
        </tr>
        <tr id='row10'>
          <td>row10</td>
          <td id='user1'></td>
          <td id='user2'></td>
          <td id='user3'></td>
          <td id='user4'></td>
          <td id='user5'></td>
          <td id='user6'></td>
          <td id='user7'></td>
          <td id='user8'></td>
          <td id='user9'></td>
          <td id='user10'></td>
          <td id='user11'></td>
          <td id='user12'></td>
          <td id='user13'></td>
        </tr>

      </tbody>
    </table>
  </div>
</body>

    【讨论】：

    • 谢谢@Manjuboyz。我希望“名称”标题也在第一个固定列中，但它在第二列中。还有如何使它适合浏览器窗口？
    • 那么它是 2 列对吗？它不会是一列吗？适合浏览器窗口允许宽度到正文。
    • 所以您需要将 Name 放在 row1、row2 等的顶部吗？如果是这样，我现在更新了我的答案。
    • 是的，我需要将名称放在第 1 行的顶部，第 2 行现在有空白空间，以适应浏览器我需要这个权利table{width: body}
    • 我正在设置table{width:100%}，但它不起作用。同样在水平滚动第一列不固定
    猜你喜欢
    • 2019-12-17
    • 1970-01-01
    • 2011-03-25
    • 2011-10-25
    • 2016-07-05
    • 1970-01-01
    • 2020-07-27
    • 1970-01-01
    • 2019-12-22
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode