☰

表の固定ヘッダーとスクロール可能な本体 質問する

tag-icon • tag-icon html css twitter-bootstrap html-table
表の固定ヘッダーとスクロール可能な本体 質問する

私は、Bootstrap 3 テーブルを使用して、固定ヘッダーとスクロール可能なコンテンツを持つテーブルを作成しようとしています。残念ながら、私が見つけた解決策は、Bootstrap では機能せず、スタイルを台無しにします。

ここにはシンプルなブートストラップ テーブルがありますが、何らかの理由で tbody の高さが 10 ピクセルではありません。

height: 10px !important; overflow: scroll;

例：

<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">

<table class="table table-striped">
    <thead>
    <tr>
        <th>Make</th>
        <th>Model</th>
        <th>Color</th>
        <th>Year</th>
    </tr>
    </thead>
    <tbody style="height: 10px !important; overflow: scroll; ">
    <tr>
        <td class="filterable-cell">111 Ford</td>
        <td class="filterable-cell">Escort</td>
        <td class="filterable-cell">Blue</td>
        <td class="filterable-cell">2000</td>
    </tr>
    <tr>
        <td class="filterable-cell">Ford</td>
        <td class="filterable-cell">Escort</td>
        <td class="filterable-cell">Blue</td>
        <td class="filterable-cell">2000</td>
    </tr>
            <tr>
        <td class="filterable-cell">Ford</td>
        <td class="filterable-cell">Escort</td>
        <td class="filterable-cell">Blue</td>
        <td class="filterable-cell">2000</td>
    </tr>
     <tr>
        <td class="filterable-cell">Ford</td>
        <td class="filterable-cell">Escort</td>
        <td class="filterable-cell">Blue</td>
        <td class="filterable-cell">2000</td>
    </tr>
    </tbody>
    
</table>

ベストアンサー1

固定テーブルヘッダー - CSS のみ

position: sticky; top: 0;要素をシンプルにth。(Chrome、FF、Edge)

.tableFixHead          { overflow: auto; height: 100px; }
.tableFixHead thead th { position: sticky; top: 0; z-index: 1; }

/* Just common table stuff. Really. */
table  { border-collapse: collapse; width: 100%; }
th, td { padding: 8px 16px; }
th     { background:#eee; }
<div class="tableFixHead">
  <table>
    <thead>
      <tr><th>TH 1</th><th>TH 2</th></tr>
    </thead>
    <tbody>
      <tr><td>A1</td><td>A2</td></tr>
      <tr><td>B1</td><td>B2</td></tr>
      <tr><td>C1</td><td>C2</td></tr>
      <tr><td>D1</td><td>D2</td></tr>
      <tr><td>E1</td><td>E2</td></tr>
    </tbody>
  </table>
</div>

両方のための固定された垂直 TH 列と水平 TH 列 (内部TBODY):

.tableFixHead          { overflow: auto; height: 100px; width: 240px; }
.tableFixHead thead th { position: sticky; top: 0; z-index: 1; }
.tableFixHead tbody th { position: sticky; left: 0; }


.tableFixHead          { overflow: auto; height: 100px; width: 240px; }
.tableFixHead thead th { position: sticky; top: 0; z-index: 1; }
.tableFixHead tbody th { position: sticky; left: 0; }

/* Just common table stuff. Really. */
table  { border-collapse: collapse; width: 100%; }
th, td { padding: 8px 16px; white-space: nowrap; }
th     { background:#eee; }
<div class="tableFixHead">
  <table>
    <thead>
      <tr><th></th><th>TH 1</th><th>TH 2</th></tr>
    </thead>
    <tbody>
      <tr><th>Foo</th><td>Some long text lorem ipsum</td><td>Dolor sit amet</td></tr>
      <tr><th>Bar</th><td>B1</td><td>B2</td></tr>
      <tr><th>Baz</th><td>C1</td><td>C2</td></tr>
      <tr><th>Fuz</th><td>D1</td><td>D2</td></tr>
      <tr><th>Zup</th><td>E1</td><td>E2</td></tr>
    </tbody>
  </table>
</div>

TH 境界問題の修正

border翻訳された要素には適切に描画できないため、 「境界線」THを再作成してレンダリングするには、次のプロパティを使用します。box-shadow

/* Borders (if you need them) */
.tableFixHead,
.tableFixHead td {
  box-shadow: inset 1px -1px #000;
}
.tableFixHead th {
  box-shadow: inset 1px 1px #000, 0 1px #000;
}


.tableFixHead          { overflow: auto; height: 100px; }
.tableFixHead thead th { position: sticky; top: 0; z-index: 1; }

/* Just common table stuff. Really. */
table  { border-collapse: collapse; width: 100%; }
th, td { padding: 8px 16px; }
th     { background:#eee; }

/* Borders (if you need them) */
.tableFixHead,
.tableFixHead td {
  box-shadow: inset 1px -1px #000;
}
.tableFixHead th {
  box-shadow: inset 1px 1px #000, 0 1px #000;
}
<div class="tableFixHead">
  <table>
    <thead>
      <tr><th>TH 1</th><th>TH 2</th></tr>
    </thead>
    <tbody>
      <tr><td>A1</td><td>A2</td></tr>
      <tr><td>B1</td><td>B2</td></tr>
      <tr><td>C1</td><td>C2</td></tr>
      <tr><td>D1</td><td>D2</td></tr>
      <tr><td>E1</td><td>E2</td></tr>
    </tbody>
  </table>
</div>

TH スティッキーが機能しない問題を修正

" " 要素の親要素th、少なくともtable要素まで (含む) が関連するスタイル (例: 、、 )を設定していないことを確認します。overflowoverflowoverflow-xoverflow-y

詳細については、stackoverflow.com/ を参照してください。「position: stick」が機能しないのはなぜですか?

固定テーブルヘッダー - JavaScript を使用

古いブラウザの場合は、JSを少し使用して要素を翻訳することthができます

// Fix table head example:

function tableFixHead(evt) {
  const el = evt.currentTarget,
    sT = el.scrollTop;
  el.querySelectorAll("thead th").forEach(th =>
    th.style.transform = `translateY(${sT}px)`
  );
}

document.querySelectorAll(".tableFixHead").forEach(el =>
  el.addEventListener("scroll", tableFixHead)
);
.tableFixHead {
  overflow-y: auto;
  height: 100px;
}


/* Just common table stuff. */

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

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

th {
  background: #eee;
}
<div class="tableFixHead">
  <table>
    <thead>
      <tr><th>TH 1</th><th>TH 2</th></tr>
    </thead>
    <tbody>
      <tr><td>A1</td><td>A2</td></tr>
      <tr><td>B1</td><td>B2</td></tr>
      <tr><td>C1</td><td>C2</td></tr>
      <tr><td>D1</td><td>D2</td></tr>
      <tr><td>E1</td><td>E2</td></tr>
    </tbody>
  </table>
</div>

おすすめ記事