第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

使 html 表格可滾動，第一行和第一列固定

使 html 表格可滾動，第一行和第一列固定

慕桂英3389331 2023-12-11 10:23:28
我想通過修復(fù)第一行和第一列來使我的 html 表格可滾動我在下面提到的 stackoverflow 問題中嘗試了各種答案，但沒有一個給出正確的結(jié)果，或者它們改變了我原來的 css 設(shè)計凍結(jié)表格的第一行和第一列如何在滾動時鎖定表格的第一行和第一列（可能使用 JavaScript 和 CSS）？我怎樣才能通過保持我原來的表格 CSS 設(shè)計來實現(xiàn)這一目標？我是 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;}
查看完整描述

1 回答

?
子衿沉夜

TA貢獻1828條經(jīng)驗 獲得超3個贊

您可以執(zhí)行以下操作（全屏查看以獲得良好的可視化效果）：


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


查看完整回答
反對 回復(fù) 2023-12-11
  • 1 回答
  • 0 關(guān)注
  • 216 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

 公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號