テーブルの幅がテキストによって変化しないように設定し、固定幅にする
2022-01-10 05:47:57
ページ内のテーブル幅にwidth="600px"を設定しても、幅が固定されず、改行せずに文字が長くなり、テーブルが歪んでしまいます。
解決策
1. table 絶対幅と相対幅の両方を設定します。
table-layout:fixed ;
このプロパティを設定すると、tdの残りの部分はすべて同じ幅になります。
この操作の後、テーブルの幅は固定されますが、中の記事が長い場合、テキストは上書きされます
回避策
tdにstyle="word-wrap:break-word;"を追加すると自動的に改行されますが、改行したくない場合は、発信内容を非表示にして省略記号に置き換えてください。
tdの上に以下を追加します。
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis; (現在IE8でのみテストされています)
tdの内容をdivで制御する推奨方法(2013-11-14 by Zhang Lei)
追加
(1) 幅と高さを超えるテキストは自動的に非表示になります。
<div style="width:100px;height:25px;overflow-x:hidden;overflow-y:hidden;"> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
(2) tdの幅が自動改行の長さを超えるように設定する。
<td><div style="width:100px;word-wrap:break-word;" > aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
</td>
解決策
1. table 絶対幅と相対幅の両方を設定します。
table-layout:fixed ;
このプロパティを設定すると、tdの残りの部分はすべて同じ幅になります。
この操作の後、テーブルの幅は固定されますが、中の記事が長い場合、テキストは上書きされます
回避策
tdにstyle="word-wrap:break-word;"を追加すると自動的に改行されますが、改行したくない場合は、発信内容を非表示にして省略記号に置き換えてください。
tdの上に以下を追加します。
コピーコード
コードは以下の通りです。
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis; (現在IE8でのみテストされています)
tdの内容をdivで制御する推奨方法(2013-11-14 by Zhang Lei)
追加
(1) 幅と高さを超えるテキストは自動的に非表示になります。
コピーコード
コードは以下の通りです。
<div style="width:100px;height:25px;overflow-x:hidden;overflow-y:hidden;"> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
(2) tdの幅が自動改行の長さを超えるように設定する。
コピーコード
コードは以下の通りです。
<td><div style="width:100px;word-wrap:break-word;" > aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
</td>
関連
-
HTML ホテル フォームによるフィルタリング
-
HTMLの相対的・絶対的な使い方と違いについて解説
-
ローカルフォルダから画像を読み込んで表示するHTMLサンプルコード
-
スクロールバーを非表示にするHTMLメソッドとスクロールバーを削除するHTMLメソッド
-
10設計と大規模なWebサイトのアーキテクチャの生産は、問題を考慮する必要があります
-
インライン要素spanの最小高さを定義する
-
複数のフォームのテキストボックスの位置を揃える方法のHTML実装
-
テーブルの外枠だけを表示させるhtml
-
HTMLページにおけるURLの表現
-
html css 制御 div または table を実装方法の指定位置で固定する。
最新
-
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 実装 サイバーパンク風ボタン
おすすめ
-
HTMLで2つのタブのナビゲーションが競合する問題の解決法
-
HTMLにおける<meta>タグの使用方法について説明します。
-
disabledとreadonlyの役割と違いについて
-
HTMLにおけるbaseタグの使い方を説明します。
-
htmlにおけるtextareaの利用方法とよくある問題点・ケーススタディ
-
htmlのWebコードにフラッシュファイルを埋め込むためのフラッシュ埋め込みhtmlソリューション(下)。
-
テーブルコンテンツの表示を高速化するtbodyタグの美点
-
Html,sHtml,XHtml差分解析まとめ
-
Firefoxで改行されない英字の解決法
-
HTMLチュートリアル。画像サイズ整列間隔ボーダー属性修正方法紹介