

下記のようなテーブルを作成しChromeで表示すると綺麗にrowspanで一つにしたカラムが見えているんですが、FirefoxとSafariだとこのrowspanしたカラムが潰れて見えてしまいます。

縦書きの指定が悪いのかと思いましたが縦書き自体はFirefox、Safari上でも表示されているのでrowspanがうまく表示されていないのかなと思いました。

これをFirefoxやSafariでもChrome同様に正しく表示させるにはどうすれば良いでしょうか？

ちなみにCSSは使わずHTML内にstyleを用いて実装する事を目的としています。

[code]

    <table border="1" style="table-layout: fixed;border-collapse: collapse; border-color: #C5C5C5; text-align: center;">
      <tbody>
        <tr>
          <td></td>
          <td></td>
          <td style="color: #43afe0">Population</td><td style="color: #3FC49F">Area</td>
        </tr>
        <tr>
          <td style="border-bottom-style: ridge" rowspan="3">
            <a style="-ms-writing-mode: tb-rl;writing-mode: vertical-rl;-webkit-writing-mode: vertical-rl;-moz-writing-mode: vertical-rl;">North America</a>
          </td>
          <td> Canada </td>
          <td>37,590,000</td>
          <td style="color: #3FC49F">9,985,000 km²</td>
        </tr>
        <tr>
          <td> USA </td>
          <td>328,200,000</td>
          <td style="color: #3FC49F">9,834,000 km²</td>
        </tr>
        <tr style="border-bottom-style: ridge">
          <td> Mexico </td>
          <td>126,200,000</td>
          <td style="color: #3FC49F">1,973,000 km²</td>
        </tr>
        <tr>
          <td rowspan="4"><a style="-ms-writing-mode: tb-rl;writing-mode: vertical-rl;-webkit-writing-mode: vertical-rl;-moz-writing-mode: vertical-rl;">Europe</a></td>
          <td> UK </td>
          <td>66,650,000</td>
          <td style="color: #3FC49F">242,500 km²</td>
        </tr>
        <tr>
          <td> France </td>
          <td>66,990,000</td>
          <td style="color: #3FC49F">643,800 km²</td>
        </tr>
        <tr>
          <td> Germany </td>
          <td>83,020,000</td>
          <td style="color: #3FC49F">357,400 km²</td>
        </tr>
      </tbody>
    </table>
    
[/code]


CC BY-SA 4.0
2021-02-08T06:44:03.420
73860
2023-01-10T14:07:15.830
2021-02-08T06:53:09.223
3060
15499
question
html firefox safari
TableのRowspanのカラムがSafariとFirefox上で見ると潰れて見えてしまう


Firefox と Safari のバグなのでしょうね。

縦書きになっている`<a>`に、`width` と `height` か、`width` と `white-space:nowrap`
を指定して回避するしかなさそうです。


CC BY-SA 4.0
2021-02-09T02:02:30.880
73878
2021-02-09T02:02:30.880
3475
73860
answer