[解決済み] CSS table td width - fixed, not flexible.
2022-03-06 18:22:01
質問
テーブルがあり、tdの幅を30pxに固定したい。問題は、tdのテキストが長すぎる場合、tdが30pxより広く引き伸ばされることである。
Overflow:hidden
はtdの上でも機能しないので、はみ出したテキストを隠してtdの幅を30pxに保つ何らかの方法が必要です。
<table cellpadding="0" cellspacing="0">
<tr>
<td>first</td><td>second</td><td>third</td><td>forth</td>
</tr>
<tr>
<td>first</td><td>this is really long</td><td>third</td><td>forth</td>
</tr>
</table>
解決方法は?
一番きれいなCSSではないですが、これで動くようになりました。
table td {
width: 30px;
overflow: hidden;
display: inline-block;
white-space: nowrap;
}
省略ありの例と省略なしの例。
body {
font-size: 12px;
font-family: Tahoma, Helvetica, sans-serif;
}
table {
border: 1px solid #555;
border-width: 0 0 1px 1px;
}
table td {
border: 1px solid #555;
border-width: 1px 1px 0 0;
}
/* What you need: */
table td {
width: 30px;
overflow: hidden;
display: inline-block;
white-space: nowrap;
}
table.with-ellipsis td {
text-overflow: ellipsis;
}
<table cellpadding="2" cellspacing="0">
<tr>
<td>first</td><td>second</td><td>third</td><td>forth</td>
</tr>
<tr>
<td>first</td><td>this is really long</td><td>third</td><td>forth</td>
</tr>
</table>
<br />
<table class="with-ellipsis" cellpadding="2" cellspacing="0">
<tr>
<td>first</td><td>second</td><td>third</td><td>forth</td>
</tr>
<tr>
<td>first</td><td>this is really long</td><td>third</td><td>forth</td>
</tr>
</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 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】JQuery: 'Uncaught TypeError: ajaxリクエストで「Illegal invocation」が発生する - 複数の要素
-
[解決済み】位置固定が機能しない
-
[解決済み] CSS color vs. background-color vs. background?
-
[解決済み] Bootstrapのカラムが機能しない
-
[解決済み] will-change' や translateZ() ハックは 'transition: height' のパフォーマンスを向上させるか?
-
[解決済み] Bootstrapのカラム内で画像を中央に配置する方法 [重複]について
-
[解決済み] HTMLボタンのテキストを固定幅で折り返すには?
-
[解決済み] TD rowspan が機能しない
-
[解決済み] アトムでキーバインドリゾルバーのポップアップを消すにはどうしたらいいですか?
-
[解決済み] HTMLのバックスペース