0

下記のようなテーブルを作成し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>

1 件の回答 1

1

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

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

1
  • ありがとうございます。ですよね。width の指定を入れることで回避致しました。 Commented 2021年2月9日 8:46

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。