テーブルヘッダーと最初の2列を固定する

debugcn 投稿 Dev

ジャック

固定テーブルヘッダーと最初の2列を固定しようとしています。列を修正するのに問題があります（右にスクロールすると、列は常に表示されます）現在のコードでは、テーブルの見出しが修正されて正常に機能しますが、列番号と名前を修正する必要があります。テーブルが大きく、ヘッダーに多くの列があります。

.tableFixHead {
  overflow-y: auto;
  height: 600px;
}

.tableFixHead table {
  border-collapse: collapse;
  width: 100%;
}

.tableFixHead th,
.tableFixHead td {
  padding: 8px 16px;
}

.tableFixHead th {
  position: sticky;
  top: 0;
  background: #eee;
}

<div class="tableFixHead">
  <table class="table table-bordered">
    <thead>
      <tr>
        <th>#</th>
        <th>Name</th>
        <th>01-11</th>
        <th>02-11</th>
        <th>03-11</th>
        <th>04-11</th>
        <th>05-11</th>
        <th>06-11</th>
        </th>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Jack</td>
        <td>Y</td>
        <td>Y</td>
        <td>Y</td>
        <td>Y</td>
        <td>Y</td>
        <td>Y</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Michel</td>
        <td>Y</td>
        <td>Y</td>
        <td>Y</td>
        <td>Y</td>
        <td>Y</td>
        <td>Y</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Amanda</td>
        <td>Y</td>
        <td>Y</td>
        <td>Y</td>
        <td>Y</td>
        <td>Y</td>
        <td>Y</td>
      </tr>
    </tbody>
  </table>
</div>

アルバロメネンデス

.tableFixHead {
  overflow: auto;
  height: 100px;
  width:300px;
}

.tableFixHead table {
  border-collapse: collapse;
  width: 100%;
}

.tableFixHead th,
.tableFixHead td {
  padding: 8px 16px;
}


td:first-child, th:first-child {
  position:sticky;
  left:0;
  z-index:1;
  background-color:white;
}
td:nth-child(2),th:nth-child(2)  { 
position:sticky;
  left:40px;
  z-index:1;
  background-color:white;
  }
.tableFixHead th {
  position: sticky;
  top: 0;
  background: #eee;
  z-index:2
}
th:first-child , th:nth-child(2) {
  z-index:3
  }

<div class="tableFixHead">
  <table class="table table-bordered">
    <thead>
      <tr>
        <th>#</th>
        <th>Name</th>
        <th>01-11</th>
        <th>02-11</th>
        <th>03-11</th>
        <th>04-11</th>
        <th>05-11</th>
        <th>06-11</th>
        </th>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Jack</td>
        <td>Y</td>
        <td>Y</td>
        <td>Y</td>
        <td>Y</td>
        <td>Y</td>
        <td>Y</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Michel</td>
        <td>Y</td>
        <td>Y</td>
        <td>Y</td>
        <td>Y</td>
        <td>Y</td>
        <td>Y</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Amanda</td>
        <td>Y</td>
        <td>Y</td>
        <td>Y</td>
        <td>Y</td>
        <td>Y</td>
        <td>Y</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Amanda</td>
        <td>Y</td>
        <td>Y</td>
        <td>Y</td>
        <td>Y</td>
        <td>Y</td>
        <td>Y</td>
      </tr>
    </tbody>
  </table>
</div>

コードを編集しました。¿これはあなたが探しているものですか？

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]