BinaryDevelop
  1. ホーム
  2. html

[解決済み] ボーダーのスタイルがスティッキーポジション要素で機能しない

2022-06-06 20:51:14

質問

でボーダーが機能しないのはなぜでしょうか？ position: sticky; 属性で動作しません。付箋を貼ったテーブルのヘッダーにボーダースタイルを設定したいのですが、透明な背景色は使いたくありません。しかし、私は透明な背景色を使用したくありません。どうすれば実現できるでしょうか？以下は、私の問題のためのサンプルコードと JSFiddleのリンク 

#wrapper {
  width: 400px;
  height: 200px;
  overflow: auto;
}

table {
  width: 100%;
  text-align: center;
  border-collapse: collapse;
}

table tr th,
table tr td {
  border: 2px solid;
}

table thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-color: #edecec;
}

<div id="wrapper">
  <table>
    <thead>
      <tr>
        <th>A</th>
        <th>B</th>
        <th>C</th>
        <th>D</th>
        <th>E</th>
      </tr>
    </thead>
    <tr>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
    </tr>
    <tr>
      <td>2</td>
      <td>2</td>
      <td>2</td>
      <td>2</td>
      <td>2</td>
    </tr>
    <tr>
      <td>3</td>
      <td>3</td>
      <td>3</td>
      <td>3</td>
      <td>3</td>
    </tr>
    <tr>
      <td>4</td>
      <td>4</td>
      <td>4</td>
      <td>4</td>
      <td>4</td>
    </tr>
    <tr>
      <td>5</td>
      <td>5</td>
      <td>5</td>
      <td>5</td>
      <td>5</td>
    </tr>
    <tr>
      <td>6</td>
      <td>6</td>
      <td>6</td>
      <td>6</td>
      <td>6</td>
    </tr>
    <tr>
      <td>7</td>
      <td>7</td>
      <td>7</td>
      <td>7</td>
      <td>7</td>
    </tr>
    <tr>
      <td>8</td>
      <td>8</td>
      <td>8</td>
      <td>8</td>
      <td>8</td>
    </tr>
    <tr>
      <td>9</td>
      <td>9</td>
      <td>9</td>
      <td>9</td>
      <td>9</td>
    </tr>
    <tbody>
    </tbody>
  </table>
</div>

以下は、私が欲しいもののためのスクリーンショットであり、私の質問を十分に明確にしていない人。

のインラインボーダースタイルを見ることができます。 th は機能しない ( を削除する position 属性で囲むと、ボーダーが表示されます。 ).

少し下にスクロールした後。すべてのボーダースタイルがなくなっているのがわかると思います。

どのように解決するのですか？

この問題が発生するのは border-collapse: collapse . ブラウザがボーダーを折りたたむと、上下のボーダーが <th> の上下のボーダーが周囲の要素に適用される必要があります。 <table> に、下のボーダーは次の <tr> .

もしあなたが border-collapse: separate を使い、ボーダーを片側に寄せるようにすると、ボーダーは本当に <th> にくっつき、期待通りに固定され、折りたたまれたように見えます。

HTMLスニペットに適用できるスタイルの例を以下に示します。 

#wrapper {
  width: 400px;
  height: 200px;
  overflow: auto;
}

table {
  width: 100%;
  text-align: center;
  border-collapse: separate; /* Don't collapse */
  border-spacing: 0;
}

table th {
  /* Apply both top and bottom borders to the <th> */
  border-top: 2px solid;
  border-bottom: 2px solid;
  border-right: 2px solid;
}

table td {
  /* For cells, apply the border to one of each side only (right but not left, bottom but not top) */
  border-bottom: 2px solid;
  border-right: 2px solid;
}

table th:first-child,
table td:first-child {
  /* Apply a left border on the first <td> or <th> in a row */
  border-left: 2px solid;
}

table thead th {
  position: sticky;
  top: 0;
  background-color: #edecec;
}

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します