表の最初の行と最初の列を固定し、適応型ウィンドウを実現するための CSS の例コード

今日のキャンパス採用筆記試験では、固定された最初の行と最初の列を実装し、幅をウィンドウの変更に適応させる必要がありますが、ウィンドウを特定の幅に縮小できず、水平スクロールバーが表示されます...
その時は書き方が間違っていて、最初の行と最初の列を固定したり、絶対位置を使用したり、親の相対位置を使用したりする方法が思いつかなかったのですが…これでは解決できない問題がたくさん出てきます…
それで戻って勉強しました。以前のチュートリアルではこれらのプロパティを学んでいませんでした。たくさん学びました、ハハ…

まず、いくつかの概念を理解してください。

テーブルレイアウト:

table-layout プロパティには、次の 2 つの特定の値があります。
自動（デフォルト） - テーブルの合計幅によって各セルの最大値が決まります
固定- テーブルの合計幅は、テーブル幅の定義と各列の幅の定義によって決まります。幅が定義されていない場合は、テーブル幅が均等に分割されます。
表の幅は、表の幅によって設定されます。列の幅は、列の最初の行のセルによってのみ決定されます。他の行のセルの幅は、列全体の幅には影響しません。
注意: カスタム幅を有効にするには、最初のセルで定義する必要があります (th)

位置: 固定

スティッキーポジショニングは、相対ポジショニングと固定ポジショニングのハイブリッドと考えることができます。要素は、特定のしきい値を超えるまでは相対的に配置され、その後は固定されます。
ターゲット領域に表示されている場合は、動作が相対的になり、変化はありません。ページがターゲット領域を超えてスクロールすると、動作が固定に変わり、ターゲットの位置に固定されます。
スティッキー要素は、祖先が最も近い実際のスクロール可能な祖先ではない場合でも、「スクロールメカニズム」 (祖先のオーバーフローが非表示、スクロール、自動、またはオーバーレイの場合) を使用して最も近い祖先に「固定」されます。
注意すべき点は、position:sticky をテーブルに適用した場合、th と td にのみ適用され、tr には影響がないということです。また、固定効果が現れるためには、ターゲット位置の left/right/top/bottom を定義する必要があります。

成し遂げる：

1. アダプティブ<br /> テーブルは幅 100% の div で囲まれており、オーバーフローするとスクロールバーが表示されます。

。箱 {
      幅: 100%;
      高さ: 200px;
      背景色: #eee;
      オーバーフロー:自動;
       マージン: 10px;
    }

表、幅100%、最小幅を設定、ここでは1000pxに設定、これは個人設定によって異なります

テーブル {
      幅: 100%;
      最小幅: 1000px;
       /* カスタム幅は固定に設定する必要があります */
      テーブルレイアウト: 固定;
      /* セル間隔を設定する */
      境界線の間隔:0;
    }

2. 最初の行と最初の列を固定するには、最初の行と最初の列に固定配置を設定する必要があります。
最初の行の設定

ヘッド tr th {
      /* th は固定位置を設定します */
      背景色: ピンク;
      位置: 固定;
      上: 0;
        /* 上境界線 */
        border-top: 1px 黒一色;
    }

最初の列の設定

 td:最初の子 {
      /* td 最初のスティッキー配置 */
      位置: 固定;
      左: 0;
      背景色: スカイブルー;
    }

セルの幅を変更する必要がある場合は、table-layout: fixedを設定する必要があります。
このプロパティは、テーブルの幅を均等に分割するデフォルトのセルを設定します。最初の列の最初のセル (th) が 200 ピクセルの固定幅に設定されている場合、この列の幅は 200 ピクセルになります。
最初のセルであることに注意してください

td:最初の子、th:最初の子 {
         /* 最初の列を 200 に設定します。th を設定すると効果的です。ここで td を追加するのは主に Border を設定するためです */
         幅: 200ピクセル;
         border-left: 1px 黒一色;
    }

もう一つ注意すべき点は境界線です。各セルの境界線を個別に設定する必要があります。境界線が崩れるとスクロールもそれに従ってしまい、見栄えが悪くなります。

全体のコード:

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
  <メタ文字セット="UTF-8">
  <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
  <title>ドキュメント</title>
  <スタイル>
    * {
      パディング: 0;
      マージン: 0;
    }

    。箱 {
      幅: 100%;
      高さ: 200px;
      背景色: #eee;
      オーバーフロー:自動;
      マージン: 10px;
    }
    テーブル {
      幅: 100%;
      最小幅: 1000px;
       /* カスタム幅は固定に設定する必要があります */
      テーブルレイアウト: 固定;
      /* セル間隔を設定する */
      境界線の間隔:0;
    }
    
    td、th {
      border-bottom: 1px 黒一色;
      border-right: 1px 黒一色;
      ボックスのサイズ: 境界線ボックス;
      /* 長さが超過した場合に表示します... */
      空白: ラップなし;
      オーバーフロー: 非表示;
      テキストオーバーフロー: 省略記号;
    }

    td:最初の子、th:最初の子 {
         /* 最初の列を 200 に設定します。th の設定が有効です */
         幅: 200ピクセル;
         border-left: 1px 黒一色;
    }
    /* 境界線が崩れるとスクロールもそれに従うので、各要素ごとに境界線を個別に設定します */
    td:最後の子、th:最後の子 {
      border-right: 1px 黒一色;
    }
    th:最後の子、td:最後の子 {
      border-right: 1px 黒一色;
    }
    .last td {
      /* 最終行の下の境界線 */
      border-bottom: 1px 黒一色;
    }
    
    ヘッド tr th {
      /* th は固定位置を設定します */
      背景色: ピンク;
      位置: 固定;
      上: 0;
        /* 上境界線 */
        border-top: 1px 黒一色;
    }
   
    td:最初の子 {
      /* td 最初のスティッキー配置 */
      位置: 固定;
      左: 0;
      背景色: スカイブルー;
    }
    thead tr th:最初の子 {
      /* 最初のものは、上下左右のスクロールによって隠れないように上部に設定されます*/
      zインデックス: 1;
      左: 0;
    }
  </スタイル>
</head>


<本文>
  <div class="box">
  <テーブル>
    <頭>
      <tr>
      <th>名前</th>
      <th>学生番号</th>
      <th>年齢</th>
      <th>結果</th>
      <th>趣味</th>
    </tr>
    </thead>
    <t本文>
      <tr>
        <td>コカコーラ1111111111111111111111111111111111111111111111111111111111</td>
        <td>コーク11111111</td>
        <td>コーラ 222222222</td>
        <td>コーラ 333333333333333333333333333</td>
        <td>コーラ</td>
      </tr>
      <tr>
        <td>コーラ</td>
        <td>コーラ</td>
        <td>コーラ</td>
        <td>コーラ</td>
        <td>コーラ</td>
      </tr>
      <tr>
        <td>コーラ</td>
        <td>コーラ</td>
        <td>コーラ</td>
        <td>コーラ</td>
        <td>コーラ</td>
      </tr>
      <tr>
        <td>コーラ</td>
        <td>コーラ</td>
        <td>コーラ</td>
        <td>コーラ</td>
        <td>コーラ</td>
      </tr>
      <tr>
        <td>コーラ</td>
        <td>コーラ</td>
        <td>コーラ</td>
        <td>コーラ</td>
        <td>コーラ</td>
      </tr>
      <tr>
        <td>コーラ</td>
        <td>コーラ</td>
        <td>コーラ</td>
        <td>コーラ</td>
        <td>コーラ</td>
      </tr>
      <tr>
        <td>コーラ</td>
        <td>コーラ</td>
        <td>コーラ</td>
        <td>コーラ</td>
        <td>コーラ</td>
      </tr>
      <tr>
        <td>コーラ</td>
        <td>コーラ</td>
        <td>コーラ</td>
        <td>コーラ</td>
        <td>コーラ</td>
      </tr>
      <tr>
        <td>コーラ</td>
        <td>コーラ</td>
        <td>コーラ</td>
        <td>コーラ</td>
        <td>コーラ</td>
      </tr>
      <tr>
        <td>コーラ</td>
        <td>コーラ</td>
        <td>コーラ</td>
        <td>コーラ</td>
        <td>コーラ</td>
      </tr>
      <tr>
        <td>コーラ</td>
        <td>コーラ</td>
        <td>コーラ</td>
        <td>コーラ</td>
        <td>コーラ</td>
      </tr>
      <tr>
        <td>コーラ</td>
        <td>コーラ</td>
        <td>コーラ</td>
        <td>コーラ</td>
        <td>コーラ</td>
      </tr>
      <tr class="last">
        <td>コーラ</td>
        <td>コーラ</td>
        <td>コーラ</td>
        <td>コーラ</td>
        <td>コーラ</td>
      </tr>
    </tbody>
  </テーブル>
</div>
</本文>
</html>

効果: (まだあまり良くないので、引き続き取り組んでください)

ここに画像の説明を挿入

これで、CSS を使用してテーブルの最初の行と最初の列を固定し、アダプティブウィンドウの例を実装する方法に関するこの記事は終了です。CSS を使用してテーブルの最初の行と最初の列を固定する方法の詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: MySQL データベースの基礎 SQL ウィンドウ関数の例の分析チュートリアル

>>: CentOS 環境で NFS リモートディレクトリマウントを使用する手順の紹介