今日のキャンパス採用筆記試験では、固定された最初の行と最初の列を実装し、幅をウィンドウの変更に適応させる必要がありますが、ウィンドウを特定の幅に縮小できず、水平スクロール バーが表示されます... まず、いくつかの概念を理解してください。 テーブルレイアウト: 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 リモート ディレクトリ マウントを使用する手順の紹介
目次1. 事例紹介2. システムのデフォルトのストレージエンジンとデフォルトの文字セットを表示する3...
HTML についてどれくらい知っていますか? 現在、基本的な HTML コードを学習している場合は、...
HTML ハイパーテキスト ドキュメントの基本構造は、ドキュメント ヘッダーとドキュメント本体の 2...
目次1. 親コンポーネントと子コンポーネントの関係2. 小道具3. $エミット4. $親V. 結論 ...
前回の記事では、beforeとafterの擬似要素を使用してMaterial Designスタイルの...
メタタグ機能METAタグは、HTMLタグのHEAD領域にある重要なタグです。文書の文字セット、使用言...
序文クエリ情報が複数のテーブルから取得される場合、クエリのためにこれらのテーブルを結合する必要があり...
目次1. フロントエンド制御1. router.js ファイル内 (router.js にそれぞれ静...
目次1. v-bind: 要素の属性にデータをバインドできる2. v-bind: は次のように省略で...
まず使用しているカーネルのバージョンを確認してくださいlin@lin-仮想マシン:~$ uname ...
序文ウェブサイトのアクセス元をカウントしたい場合は、PHP を使用して情報を取得してデータベースに記...
開発に Vue を使用する場合、次のような状況に遭遇することがあります。Vue インスタンスを生成し...
数日前、CSS を使用して三角形の矢印を実装する方法について記事を書きました。 目的の効果は達成され...
explain はクエリ実行プラン情報を取得するために使用されます。 1. 文法次のように、sele...
目次序文1. クロスドメインの問題はなぜ発生するのでしょうか? 2. 解決策クロスオリジンリソース共...