下記のようなテーブルを作成しChromeで表示すると綺麗にrowspanで一つにしたカラムが見えているんですが、FirefoxとSafariだとこのrowspanしたカラムが潰れて見えてしまいます。
縦書きの指定が悪いのかと思いましたが縦書き自体はFirefox、Safari上でも表示されているのでrowspanがうまく表示されていないのかなと思いました。
これをFirefoxやSafariでもChrome同様に正しく表示させるにはどうすれば良いでしょうか?
ちなみにCSSは使わずHTML内にstyleを用いて実装する事を目的としています。
<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>