【HTML】CSSでtableのtdを改行させない方法(white-space: nowrap;の使い方)
![表(意図しないところで単語が改行される)](https://i0.wp.com/skill.u-ff.com/wp-content/uploads/2023/10/f706f812774ab775c6e52d888dfb3c5d.png?resize=857%2C592&ssl=1)
表(意図しないところで単語が改行される)
上記のような表があって、3列目(理由)の欄が長すぎる影響で、1・2列目(あげた人・もらった人)の欄の人名が意図しないところで改行されてしまう
そういう場合は、以下のようなCSSを設定すると
td:nth-of-type(-n+2) { width: 0; white-space: nowrap; }
改行せずにちょうどいい具合の列幅になってくれます
![nowrap](https://i0.wp.com/skill.u-ff.com/wp-content/uploads/2023/10/03_nowrap.png?resize=864%2C384&ssl=1)
nowrap
CSSでtd要素に
white-space: nowrap;
を指定してやることで改行(折り返し)を禁止にできます
また
width: 0;
を指定することで列幅をできるだけ小さく(文字幅ぴったりに)することができます
tableで特定の列にだけcssを適用する方法
nth-of-type(-n+2)
の部分についての解説は以下を参照
![](https://i0.wp.com/skill.u-ff.com/wp-content/uploads/2023/10/03_nowrap.png?resize=320%2C180&ssl=1)
【HTML】tableの特定の列だけCSSで一括装飾する方法(nth-of-typeの使い方)
【HTML】tableの特定の列だけCSSで一括装飾する方法(nth-of-typeの使い方) サイトに表を載せるとき 「1列目だけ文字を大きくしたい」とか 「3列目だけ中央寄せにしたい」とか 特定の列だけ表示の仕方を変えたい場合があります...
コメント