プチIT化 PR

【HTML+CSS】テーブル列幅が等分されない・文字が重なる原因

記事内に商品プロモーションを含む場合があります。
当サイトは、アフィリエイト広告を利用しています。

こんにちは、わたあめです。今回の記事はHTMLのtableタグについての記事になります。

HTMLで表を作成する時に、tableタグを利用しますよね。列の幅を当分したいという時に、表示の調整が難しい事ってないでしょうか。例えば…

  • ある列の幅だけ長い
  • 文字がセルからとび出て重なる
table-layout: fixed設定したのに列幅がおかしい・文字が飛び出る例

今日は列幅を等分しようと設定(table-layout: fixed)したのに、等分されなかったり幅が広くなりすぎたりする問題とその解決策を紹介していきます。それでは、いってみましょう!

事象詳細:固定列幅で等分設定しているのに表示が崩れる

以下ののような基本的なテーブルを例に説明していきます。まずは、基本のHTMLの表のコードです。

<html>
 <body>
  <table border="1">
   <tr>
    <td>aaa</td>
    <td>bbb</td>
    <td>ccc</td>
   </tr>
   <tr>
    <td>ddd</td>
    <td>eee</td>
    <td>fff</td>
   </tr>
   <tr>
    <td>ggg</td>
    <td>hhh</td>
    <td>iii</td>
   </tr>
  </table>
 </body>
</html>

表示結果は以下となります。デフォルトでも、列幅を指定しない場合はが3等分されて表示されますね。

基本のテーブルサンプル

ただ、テーブル一つのtd要素の文字列が長くなってしまった場合、この固定幅は崩れ等分されなくなります。文字に合わせて自動で列幅が調整されるようです。例えば、bbbの文字列を長くした場合、以下のHTMLのコードと表示結果を見てみましょう。

<html>
 <body>
  <table border="1">
   <tr>
    <td>aaa</td>
    <td>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</td>
    <td>ccc</td>
   </tr>
   <tr>

(以下省略)
列幅が文字に合わせて広がってしまう表示例

文字数に合わせて列幅が広がってしまって等分レイアウトが崩れてしまいます。そこで、列幅固定の以下のCSSを利用する方がいるのではないかと思います。

table { table-layout: fixed; }

「table-layout」を"fixed"に設定し、テーブルの列幅を指定しない場合、各列が同じ列幅となり、等分されます。3列だったら3等分という具合です。ですが、単純に上記CSSを記載しただけでは、以下の問題が発生しました。

  • ある列の幅だけ長い
  • 文字がセルからとび出て重なる

等分設定したけどされない場合や文字が重なってしまうときどうすればいいか、次章からまとめていきます!

tableタグで列幅を等分する時に発生するトラブル

table-layout: fixed設定が効かない場合の原因と対処

以下のHTMLとCSSでテーブルの列幅を等分する設定を記載しているのに、文字数に合わせて列幅が広がってしまう現象がありました。以下例では、head部分にCSSを記載しています。

table-layout: fixed設定が効かない表示例
<html>
 <head>
  <style type="text/css">
   table { table-layout: fixed; }
  </style>
 </head>
 <body>
  <table border="1">
   <tr>
    <td>aaa</td>
    <td>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</td>
    <td>ccc</td>
   </tr>

(以下省略)

この場合の原因は横幅を100%で指定していないからでした。横幅を100%にする記述をtableタグ部分に入れます。※CSS部分でも良いですね。

width="100%"
<html>
 <head>
  <style type="text/css">
   table { table-layout: fixed; }
  </style>
 </head>
 <body>
  <table border="1" width="100%">
   <tr>
    <td>aaa</td>
    <td>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</td>
    <td>ccc</td>
  </tr>

(以下省略)

これで、列幅は等分に整ったかと思います。が、次なる問題で等分したものの文字が隣の列にそのまま伸びて文字が重なって表示されてしまう現象が発生しました。事象にまとめます。

table-layout: fixedで文字が重なる場合の原因と対処

列幅を等分するCSSを入れ、列幅が等分されるも、文字数が多いとはみ出て隣のセルに文字が重なってしまう現象がおきました。

table-layout: fixedで文字が重なる場合の表示例

原因はtd 要素の文字が折り返されないからでした。対処としてはtdタグのCSSに文字折り返しの設定を記述します。

td { word-break: break-all; }

word-wrapは文字数が収まらない場合にどうするか?を指定するCSSです。break-allはどんな文字(意味のある単語や括弧でも)でも文字を折り返すという設定ですが、他にも単語の意味を考慮する「break-word」も指定できます。

HTMLに入れ込む場合、以下のコードのようになります。

<html>
 <head>
  <style type="text/css">
   table { table-layout: fixed; }
   td { word-break: break-all; }
  </style>
 </head>
 <body>
  <table border="1" width="100%">
   <tr>
    <td>aaa</td>
    <td>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</td>
    <td>ccc</td>
   </tr>

(以下省略)

これで改行が自動的に入り、なおかつ列幅等分に設定することができました。

等分と改行で整ったテーブル表示例

さいごに

いかがだったでしょうか。今回はHTML+CSSの表の等分表示についての記事でした。CSSは別ファイルに記載しても良いですね。少しでも参考になれば幸いです!それでは、また。