LoginSignup
1
1

More than 3 years have passed since last update.

tbodyとtheadを跨ぐとrowspanが効かない

Posted at

タイトル行が2行だったり、1行だったりする複雑な表をコーディングする必要があり、
下のように記述したところrowspanが無視されハマった。
ググったところ表の高さが足りていない場合そうなるようだが、そもそも高さを指定しておらず他の箇所では同じ高さで結合できていた。

<table>
 <thead>
  <tr>
    <th>1行目の1列目</th>
    <th rowspan="2">1行目と2行目の2列目</th>
  </tr>
 <thead>
 <tbody>
  <tr>
    <td>2行目の1列目<td>
  </tr>
 </tbody>
</table>

試しにtheadを外して全部tbodyにしたら思ったように結合できました。
tbodyの中にthが入るので変なコードになるのが難点ですが。
そもそもこういう複雑な表を記述する場合、theadやtbodyを書かない方が無難かもしれません。

<table>
 <tbody>
  <tr>
    <th>1行目の1列目</th>
    <th rowspan="2">1行目と2行目の2列目</th>
  </tr>
  <tr>
    <td>2行目の1列目<td>
  </tr>
 </tbody>
</table>

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1