[解決済み] テーブルの列幅を、セル内のテキスト量に関係なく一定にする?
2022-03-16 14:26:44
質問
テーブルの中で、ある列の最初のセルの幅を
100px
.
しかし、この列のセルの1つのテキストが長すぎる場合、列の幅が
100px
. どうすればこの拡張を無効にできますか?
解決方法は?
なかなか分からなくて少し遊んでしまいました。
セルの幅を設定する必要があります。
th
または
td
を設定し、さらに
table-layout
から
fixed
. なぜか、テーブルの幅も設定されている場合のみ、セルの幅が固定されるようです(ばかばかしいと思いますが、まあいいや)。
また
overflow
プロパティを
hidden
を使用して、テーブルから余分なテキストが出てこないようにします。
縁取りやサイズ調整もすべてCSSに任せるようにしたほうがいい。
OK、ではこうしましょう。
table {
border: 1px solid black;
table-layout: fixed;
width: 200px;
}
th,
td {
border: 1px solid black;
width: 100px;
overflow: hidden;
}
<table>
<tr>
<th>header 1</th>
<th>header 234567895678657</th>
</tr>
<tr>
<td>data asdfasdfasdfasdfasdf</td>
<td>data 2</td>
</tr>
</table>
この人も同じような問題を抱えていました。 テーブルセルの幅 - 幅の固定、長い単語の折り返し/切り捨て
関連
-
[解決済み] セレクトボックスのプレースホルダーを作成するにはどうすればよいですか?
-
[解決済み] スクロールバーを隠すが、スクロールはできる状態
-
[解決済み] コンテナの幅に応じたフォントの拡大縮小
-
[解決済み] jQueryで名前を指定して要素を選択するには?
-
[解決済み] inline/inline-block要素間のスペースを削除するにはどうすればよいですか?
-
[解決済み] not:first-child セレクタ
-
[解決済み] div内の要素を縦に並べるにはどうしたらいいですか?
-
[解決済み] jQueryの送信ボタンの無効化・有効化
-
[解決済み] テーブルセルでCSSテキストオーバーフロー?
-
[解決済み】あるdivの上に別のdivを重ねる方法
最新
-
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 実装 サイバーパンク風ボタン
おすすめ
-
Uncaught TypeError: document.getElementsById は関数ではありません。
-
ローカルリソースのロードが許可されていない問題を解決する
-
[解決済み] HTMLにおける'"'エンティティの使用法
-
[解決済み] CSSでテキストを垂直方向にセンタリングするには?[重複しています]
-
[解決済み] XHTMLの自己完結型タグを除くオープンタグにマッチするRegEx
-
[解決済み] input type="file "ボタンのスタイリング
-
[解決済み] input type="date "のフォーマットを変更する方法はありますか?
-
[解決済み] HTMLのid属性とname属性の違い
-
[解決済み] IMGとCSSのbackground-imageはいつ使い分ける?
-
[解決済み] 静的な HTML ページにファビコンを追加する