1. ホーム
  2. Web制作
  3. HTML/Xhtml

テーブルの幅がテキストによって変化しないように設定し、固定幅にする

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>