0

私の質問をタイトルで網羅的に説明するのは難しかったので、説明をより明確にしようと思います。セマンティックなアプローチを意図的に避けて<div>、CSS プロパティなどを使用および適用してテーブルを作成します。すべてが正常に機能しており、現在、を使用して固定ヘッダーを実現しようとしています。結果は次のとおりです。display: table<table>position: fixed

ここに画像の説明を入力

当然のdisplay: table-cellことながら、セルの残りの部分に適用されると、この望ましくない動作が引き起こされます。セルは新しいコンテンツに合わせて自動サイズ変更min-width: 100pxされ、CSS ファイルに適用したルールに従っています。

作業中のペンへのリンク: https://codepen.io/l_core/pen/ZLQEjq

純粋な CSS アプローチを使用して、ヘッダーと「本文」セルを完全に揃える方法はありますか? JS を使用して幅を再計算することもできますが、これを実現するための洗練された方法があると確信しており、ここで専門家にその方法を尋ねたいと思います。

コードの下:

HTML 

    <!-- Row Container -->
    <div class="row-container" id="row1">

      <!-- Header cell container -->
      <div class="cell cell-header" id="cell1">

        <!-- Cell content container -->
        <div class="cell-content">
          <span>Cell</span>
        </div>
      </div>

      <div class="cell cell-header" id="cell2">
        <div class="cell-content">
          <span>Cell</span>
        </div>
      </div>

      <div class="cell cell-header" id="cell3">
        <div class="cell-content">
          <span>Cell</span>
        </div>
      </div>

      <div class="cell cell-header" id="cell4">
        <div class="cell-content">
          <span>Cell</span>
        </div>
      </div>

      <div class="cell cell-header" id="cell5">
        <div class="cell-content">
          <span>Cell</span>
        </div>
    </div>

CSS 

#row1 {
  position: fixed;
}

完全なコードについては、上に投稿したペンをご覧ください。彼の全編を投稿するのが良い考えかどうかはわかりません。

4

2 に答える 2

2

固定要素は、通常の html フローから外れています。したがって、テーブル ヘッダーはもはやテーブルの一部ではありません。したがって、彼らは独立して行動します。

min-width の代わりに、すべてのセルに一定の (または JS を使用して動的に計算された) 幅を設定できます。

于 2017-01-11T12:41:52.283 に答える
1

Flex をメイン コンテナとして使用する場合は、そうなると思います。幅の問題を解決します。

  1. メイン コンテナをフレックス コンテナとして作成します。
  2. Main-Container 内で、flex 方向を「column」にします。

Flex の詳細については、以下を検索できます。

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

于 2017-01-12T07:29:22.883 に答える