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

推薦する

MySQL データ分析ストレージエンジンの例の説明

目次1. 事例紹介2. システムのデフォルトのストレージエンジンとデフォルトの文字セットを表示する3...

HTML スペースコードの簡単な分析

HTML についてどれくらい知っていますか? 現在、基本的な HTML コードを学習している場合は、...

HTMLの基礎: HTMLの基本構造

HTML ハイパーテキスト ドキュメントの基本構造は、ドキュメント ヘッダーとドキュメント本体の 2...

Vueで親子コンポーネント通信を実装する方法

目次1. 親コンポーネントと子コンポーネントの関係2. 小道具3. $エミット4. $親V. 結論 ...

単一のdivの正多角形変換を実現する純粋なCSS

前回の記事では、beforeとafterの擬似要素を使用してMaterial Designスタイルの...

HTML メタタグの使用の概要 (推奨)

メタタグ機能METAタグは、HTMLタグのHEAD領域にある重要なタグです。文書の文字セット、使用言...

どのような種類の MYSQL 接続クエリを知っていますか?

序文クエリ情報が複数のテーブルから取得される場合、クエリのためにこれらのテーブルを結合する必要があり...

Vueは動的ルーティングの詳細を実装します

目次1. フロントエンド制御1. router.js ファイル内 (router.js にそれぞれ静...

vue ディレクティブ v-bind の使用と注意点

目次1. v-bind: 要素の属性にデータをバインドできる2. v-bind: は次のように省略で...

Ubuntu 12.04 でカーネルツリーを構築する実装プロセスの詳細な説明

まず使用しているカーネルのバージョンを確認してくださいlin@lin-仮想マシン:~$ uname ...

Nginx ログのカスタマイズとログ バッファの有効化の詳細な説明

序文ウェブサイトのアクセス元をカウントしたい場合は、PHP を使用して情報を取得してデータベースに記...

Vue.set() と this.$set() の使い方と違い

開発に Vue を使用する場合、次のような状況に遭遇することがあります。Vue インスタンスを生成し...

@font-face を使用して Web ページに特殊文字を実装する (カスタム フォントを作成する)

数日前、CSS を使用して三角形の矢印を実装する方法について記事を書きました。 目的の効果は達成され...

MySQL explain クエリ命令情報の取得原理と例

explain はクエリ実行プラン情報を取得するために使用されます。 1. 文法次のように、sele...

Vue は Axios リクエスト フロントエンドのクロスドメイン問題をどのように解決するのか

目次序文1. クロスドメインの問題はなぜ発生するのでしょうか? 2. 解決策クロスオリジンリソース共...