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

表の最初の行と最初の列を固定し、適応型ウィンドウを実現するための 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 リモート ディレクトリ マウントを使用する手順の紹介

推薦する

Nginx tp3.2.3 404 問題の解決

最近、Apache を nginx に変更しました。TP プロジェクトを実行に移すと、404 エラー...

HTML 固定タイトル列、タイトル ヘッダー テーブル固有の実装コード

コードをコピーコードは次のとおりです。 <!DOCTYPE html PUBLIC "...

URLパラメータに基づくNginx転送

使用シナリオ:ジャンプ パスは、傍受された URL に応じて動的に構成する必要があります。これは、イ...

非表示のフォームテキストを表示するJavaScript

この記事では、フォームの隠しテキストを表示するためのJavaScriptの具体的なコードを参考までに...

ウェブページレイアウトデザインのシンプルな原則

この記事では、Web ページ レイアウト デザインのいくつかの簡単な原則をまとめ、Web ページ デ...

ubuntu20.04 LTSにdockerをインストールする方法

ゼロ: 古いバージョンをアンインストールするDocker の古いバージョンは、docker、dock...

MySQL での mysqladmin 日常管理コマンドの概要 (必読)

mysqladmin ツールの使用形式は次のとおりです。 mysqladmin [オプション] コ...

docker公式mysqlイメージのカスタム構成の詳細な説明

インストール時間を節約するために、公式の mysql docker イメージを使用して mysql ...

MySQL InnoDB の重要なコンポーネントの概要

Innodbには以下のコンポーネントが含まれています1. innodb_buffer_pool:これ...

CSS3 のメディアクエリと rem レイアウトを組み合わせてモバイル画面に適応

CSS3 構文: (750 ピクセルのデザインの場合、1rem = 100 ピクセル) @media...

Vue の動的メニュー、動的ルートの読み込みと更新の落とし穴

目次必要:アイデア:レッスン:テキストを共有する:要約する必要:インターフェイスからサブメニュー デ...

LINUX での IPTABLES ファイアウォールの基本的な使用方法のチュートリアル

序文パブリック IP を持つ本番 VPS の場合、必要なポートのみが開かれ、IP とポートを制御する...

Apache での ab パフォーマンス テスト結果を分析する

私はパフォーマンス テストを行うために常に Loadrunner を使用してきました。 Loadru...

Windows 64 ビットでの MySQL 8.0.13 のインストールと設定方法のグラフィック チュートリアル

この記事では、MySQL 8.0.13のインストールと設定のチュートリアルを参考までに紹介します。具...

MySQL Community Server 8.0.12 のインストールと設定方法のグラフィックチュートリアル

MySQL 8 は、NoSQL、JSON などのサポートなど、まったく新しいエクスペリエンスをもたら...