【Web】rowspan属性を0に設定した時のFirefoxの動作について

注意
詳しくは公式リファレンスを見ればわかるらしいので今回は事象についての紹介です。

そもそもrowspan属性に対して0を設定することはないと思いますが、
Firefoxでだけ謎動作をしたのでメモ程度に…

tdタグについて

そこそこ使う属性については以下の通りです。
ちなみにHTML5になってからtdタグに付けれる属性が減り、
width属性などは廃止されてるみたいです。

属性 説明
colspan 指定数だけセルを縦に連結する
rowspan 指定数だけセルを横に連結する
headers thとtdをidで関連付けれる

HTML4.01とHTML5での動作の違いについて

Firefoxだけ何故かHTML4.01とHTML5で表示結果が異なり、
テーブルのレイアウトが崩れてしまいます。

HTML4.01での表示結果

HTML5での表示結果

サンプルソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<body>
  <table border="1">
    <tbody>
      <tr>
        <td rowspan="1">A1</td>
        <td>A2</td>
      </tr>
      <tr>
        <td rowspan="0">B1</td>
        <td>B2</td>
      </tr>
      <tr>
        <td rowspan="0">C1</td>
        <td>C2</td>
      </tr>
      <tr>
        <td rowspan="0">D1</td>
        <td>D2</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

<!DOCTYPE html>
<html>
<body>
  <table border="1">
    <tbody>
      <tr>
        <td rowspan="1">A1</td>
        <td>A2</td>
      </tr>
      <tr>
        <td rowspan="0">B1</td>
        <td>B2</td>
      </tr>
      <tr>
        <td rowspan="0">C1</td>
        <td>C2</td>
      </tr>
      <tr>
        <td rowspan="0">D1</td>
        <td>D2</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

ブラウザでの動作確認結果

各種ブラウザで動作結果を行いましたが、Firefoxだけ動作が異なるようです。

ブラウザ名 HTML4.01 HTML5
Firefox ×
Chrome
IE11
Edge

可変的にrowspan属性を変更する時には0を設定しないように気をつける必要がありそうです…。

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください