固定テーブル幅テーブルレイアウト: 固定
|
テーブルを画面全体（残りの空白領域）に表示するために、幅属性は 100% と定義されることが多く、セルもパーセンテージを使用して定義されます。 しかし、これによって問題が発生します。セル内のテキストが幅の制限を超えると、テキストは自動的に折り返され、高さも自動的に増加するため、表全体のスタイルが不均一で見苦しくなります。 明らかな解決策は、テキストの折り返しを無効にすることです: white-space:nowrap; overflow:hidden; とても簡単です! しかし、効果はまだ予想外です。すべてのテキストが 1 行に表示され、幅が自動的に広げられ、親コンテナーを超えてしまいます。オーバーフローはまったく機能しません! どうしたの？ それはパーセンテージによるのでしょうか? ただし、静的な固定幅を使用すると、テーブルの柔軟性が失われます。 そのため、大きな労力をかけずに究極の解決策が見つかりました: テーブル幅を固定: table-layout: fixed; ちなみに、簡単な効果図を作ったので参考にしてください。  |
<<: VMWare仮想マシンのcentosの時間が現地時間と矛盾する問題を解決する
>>: CSS が複数のクラスに一致する方法のサンプルコード
推薦する
Linux ファイルとユーザー管理の実践
1. /etc ディレクトリ内の、文字以外の文字で始まり、その後に文字と任意の長さのその他の文字が続...
CSS3 は 3D キューブの読み込み効果を作成します
簡単な説明これは CSS3 のクールな 3D キューブのプリロード効果です。この特殊効果は、シンプル...
Linuxでユーザーが所属するグループを変更する方法
Linuxでユーザーが所属するグループを変更する1. ユーザーのグループを設定する usermod ...
マップタグパラメータの詳細な紹介と使用例
マップ タグはペアで表示する必要があります。 <map> ....</map>...
el-table ヘッダーでテキストを折り返す 3 つの方法の詳細な説明
目次問題の説明レンダリング3種類のコード要約する問題の説明通常、表のヘッダーは折り返されませんが、ビ...
MySQL 圧縮版 zip のインストールに関する問題の解決策
本日、MySQLの圧縮版をインストールする際に問題が発生しました。サービスが起動できず、2、3時間苦...
フレームセットの高さを設定する際のインターフェース変形の解決策
現在、プロジェクトを作成しました。インターフェースは次のとおりです。これはフレームセットを使用して行...
Chrome プラグイン (拡張機能) 開発ガイド (完全デモ)
目次前面に書かれた序文ChromeプラグインとはChrome プラグイン開発を学ぶことの意義は何です...
MySQL マスター スレーブ データベースが同期されない問題を解決する 2 つの方法
目次MySQL マスター スレーブ データベースが同期されない問題を解決する 2 つの方法1. 非同...
MySql はコミットする必要がありますか?
MySQL が挿入などの操作を実行するときにコミットする必要があるかどうかは、ストレージ エンジン...
MySQL パーティションテーブルの制限と制約の詳細な説明
ビルドを無効にするパーティション式では、次の構成はサポートされません。ストアドプロシージャ、ストアド...
jQueryのanimateアニメーションメソッドとアニメーションキューイング問題の解決方法の詳しい説明
目次animate() アニメーションメソッドアニメーションキューイングdelay() メソッドアニ...
HTML テーブル マークアップ チュートリアル (15): テーブル タイトル
<br />このタグを使用すると、表のタイトルを直接追加し、タイトル テキストの配置プロ...
Brotli圧縮アルゴリズムを有効にするNginxの実装プロセスの詳細な説明
序文Web アプリケーションでは、トラフィックを節約し、転送データのサイズを縮小し、転送効率を向上さ...
Datagrip2020 が MySQL ドライバーのダウンロードに失敗する
「downloadlaod」を直接クリックしてもダウンロードできない場合は、ここからダウンロードす...