今日のキャンパス採用筆記試験では、固定された最初の行と最初の列を実装し、幅をウィンドウの変更に適応させる必要がありますが、ウィンドウを特定の幅に縮小できず、水平スクロール バーが表示されます... まず、いくつかの概念を理解してください。 テーブルレイアウト: table-layout プロパティには、次の 2 つの特定の値があります。 位置: 固定 スティッキーポジショニングは、相対ポジショニングと固定ポジショニングのハイブリッドと考えることができます。要素は、特定のしきい値を超えるまでは相対的に配置され、その後は固定されます。 成し遂げる: 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を設定する必要があります。 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 リモート ディレクトリ マウントを使用する手順の紹介
最近、Apache を nginx に変更しました。TP プロジェクトを実行に移すと、404 エラー...
コードをコピーコードは次のとおりです。 <!DOCTYPE html PUBLIC "...
使用シナリオ:ジャンプ パスは、傍受された URL に応じて動的に構成する必要があります。これは、イ...
この記事では、フォームの隠しテキストを表示するためのJavaScriptの具体的なコードを参考までに...
この記事では、Web ページ レイアウト デザインのいくつかの簡単な原則をまとめ、Web ページ デ...
ゼロ: 古いバージョンをアンインストールするDocker の古いバージョンは、docker、dock...
mysqladmin ツールの使用形式は次のとおりです。 mysqladmin [オプション] コ...
インストール時間を節約するために、公式の mysql docker イメージを使用して mysql ...
Innodbには以下のコンポーネントが含まれています1. innodb_buffer_pool:これ...
CSS3 構文: (750 ピクセルのデザインの場合、1rem = 100 ピクセル) @media...
目次必要:アイデア:レッスン:テキストを共有する:要約する必要:インターフェイスからサブメニュー デ...
序文パブリック IP を持つ本番 VPS の場合、必要なポートのみが開かれ、IP とポートを制御する...
私はパフォーマンス テストを行うために常に Loadrunner を使用してきました。 Loadru...
この記事では、MySQL 8.0.13のインストールと設定のチュートリアルを参考までに紹介します。具...
MySQL 8 は、NoSQL、JSON などのサポートなど、まったく新しいエクスペリエンスをもたら...