【HTML】CSSでtableのtdを改行させない方法(white-space: nowrap;の使い方)

表(意図しないところで単語が改行される)

上記のような表があって、3列目(理由)の欄が長すぎる影響で、1・2列目(あげた人・もらった人)の欄の人名が意図しないところで改行されてしまう

そういう場合は、以下のようなCSSを設定すると

td:nth-of-type(-n+2) {
  width: 0;
  white-space: nowrap;
}

改行せずにちょうどいい具合の列幅になってくれます

nowrap

CSSでtd要素に

white-space: nowrap;

を指定してやることで改行(折り返し)を禁止にできます

また

width: 0;

を指定することで列幅をできるだけ小さく(文字幅ぴったりに)することができます

tableで特定の列にだけcssを適用する方法

nth-of-type(-n+2)

の部分についての解説は以下を参照