1

これについては、PHP / HTML / CSSでいくつかのソリューションを検索しましたが、これまでのところ何も機能しませんでした。おそらく、これらの例のほとんどでコードが多すぎて、迷子になってしまったためです。誰かが私に何をする必要があるかを説明したり、ここに簡単なサンプルコードを入れたりできますか？

4

2 に答える 2

2

CSSを使用したテーブル固定ヘッダー

最も単純なのはposition: sticky;あなたのth要素です：

.tableFix { /* Scrollable parent element */
  position: relative;
  overflow: auto;
  height: 100px;
}

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

.tableFix th,
.tableFix td{
  padding: 8px;
  text-align: left;
}

.tableFix thead th {
  position: sticky;  /* Edge, Chrome, FF */
  top: 0px;
  background: #fff;  /* Some background is needed */
}
<div class="tableFix">

  <table>
    <thead>
      <tr><th>H1</th><th>Header 2</th><th>Header 3</th><th>4</th><th>5th Header</th></tr>
    </thead>
    <tbody>
      <tr><td>R1C2</td><td>R1C2</td><td>R1C3</td><td>R1C4</td><td>R1C5</td></tr>
      <tr><td>R2C1</td><td>R2C2</td><td>R2C3</td><td>R2C4</td><td>R2C5</td></tr>
      <tr><td>R3C1</td><td>R3C2</td><td>R3C3</td><td>R3C4</td><td>R3C5</td></tr>
      <tr><td>R4C1</td><td>R4C2</td><td>R4C3</td><td>R4C4</td><td>R4C5</td></tr>
      <tr><td>R5C1</td><td>R5C2</td><td>R5C3</td><td>R5C4</td><td>R5C5</td></tr>
      <tr><td>R6C1</td><td>R6C2</td><td>R6C3</td><td>R6C4</td><td>R6C5</td></tr>
    </tbody>
  </table>

</div>

古いブラウザのテーブル固定ヘッダー

サポートする必要のあるブラウザに位置の値が含まれていない場合は、Javascriptを少し使用してテーブルヘッドを修正stickyするを確認できます。

于 2018-08-19T18:28:30.060 に答える
1

このコード（コメント内のリンクから取得）は、必要な基本コードです。次回、そのようなことを理解する必要があるときは、コードのセグメントを削除して何が壊れているかを確認し、必要なものを壊さないものはすべて除外します。

<html>
<head>
<style>
div.tableContainer {
    clear: both;
    border: 1px solid #963;
    height: 285px; /* html>body tbody.scrollContent height plus 23px for the header */
    overflow: auto;
    width: 756px /* Remember to leave 16px for the scrollbar! */
}

html>body tbody.scrollContent {
    display: block;
    height: 262px;
    overflow: auto;
    width: 100%
}


html>body thead.fixedHeader tr {
    display: block
}

html>body thead.fixedHeader th { /* TH 1 */
    width: 200px
}

html>body thead.fixedHeader th + th { /* TH 2 */
    width: 240px
}

html>body thead.fixedHeader th + th + th { /* TH 3 +16px for scrollbar */
    width: 316px
}

html>body tbody.scrollContent td { /* TD 1 */
    width: 200px
}

html>body thead.scrollContent td + td { /* TD 2 */
    width: 240px
}

html>body thead.scrollContent td + td + td { /* TD 3 +16px for scrollbar */
    width: 316px
}
</style>
</head>
<body>

<div id="tableContainer" class="tableContainer">
<table width="100%" cellspacing="0" cellpadding="0" border="0" class="scrollTable">
    <thead class="fixedHeader">
        <tr class="alternateRow">
            <th><a href="#">Header 1</a></th>
            <th><a href="#">Header 2</a></th>
            <th><a href="#">Header 3</a></th>
        </tr>
    </thead>
    <tbody class="scrollContent">
        <tr class="normalRow">
            <td>Cell Content 1</td>
            <td>Cell Content 2</td>
            <td>Cell Content 3</td>
        </tr>
        <tr class="alternateRow">
            <td>More Cell Content 1</td>
            <td>More Cell Content 2</td>
            <td>More Cell Content 3</td>
        </tr>
        .........
    </tbody>
</table>
</div>
</body>
</html>
于 2012-10-25T05:19:57.860 に答える