htmlテーブルの比較幅のオーバーフローを解決する方法
2022-01-07 16:34:40
テーブルの幅が広いとオーバーフローすることがあります。
例えば、leftとrightの2つのdivがあるとします。右のdivにテーブルがあっても、幅が広ければ、右のdivではなく、その下に表示される可能性が高いです。この場合、このテーブルの幅は次のように指定すればよい。
コピーコード
コードは以下の通りです。
<table style='width:85%'>
強制改行なし、幅を超える自動非表示と表示楕円を超えるhtmlのテーブルコンテンツを解決する
テーブルのレイアウトでは、しばしばテーブルの内容の長さの変化のために発生した状況のレイアウトの混乱につながった、この時間は、レイアウトの安定性のためにセルの幅を記述する必要があるかもしれません。
table{
table-layout:fixed;/* The definition of td below will work only if the table layout algorithm is defined as fixed. */
}
td{
width:100%;
word-break:keep-all;/* no line break */
white-space:nowrap;/* no line break */
overflow:hidden;/* hide overflow when content is out of width */
text-overflow:ellipsis;/* show the omitted marker when the text inside the object is overflowing (...) ; needs to be used together with overflow:hidden;. */
}
セルの内容を完全に隠してしまうのが心配な場合は、セルの先頭に title 属性を追加して、マウスを乗せるとすぐにセルの内容を完全に表示できるようにすることをお勧めします。
関連
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン