Создание прокручиваемой таблицы html с исправлением первой строки и столбца - PullRequest
Новая
       0

Создание прокручиваемой таблицы html с исправлением первой строки и столбца

1 голос
/ 12 апреля 2020

Я хочу, чтобы мою таблицу html можно было прокручивать, исправляя первую строку и столбец

Я пробовал разные ответы в нижеприведенных вопросах stackoverflow, но ни один из них не дает правильных результатов, или они меняют мой исходный css design

Заморозить первую строку и первый столбец таблицы

Как заблокировать первую строку и первый столбец таблицы при прокрутке, возможно, используя JavaScript и 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>

1 Ответ

0 голосов
/ 12 апреля 2020

Вы можете сделать что-то вроде этого (Просмотр в полноэкранном режиме для хорошей визуализации): 

$(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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...