Rowspan columns in Table appear crushed when viewed on Safari and Firefox

If you create a table like the one below and display it in Chrome, you can see a column with rspan neatly, but with Firefox and Safari, this rowspan column will be crushed and visible.

I thought the vertical writing was bad, but the vertical writing itself was also displayed on Firefox and Safari, so I thought rspan was not displayed well.

How can I display this correctly on Firefox and Safari as well as Chrome?

By the way, the purpose is not to use CSS, but to implement it using style within HTML.

<table border="1" style="table-layout:fixed;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" rspan="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 km2</td>
    </tr>
    <tr>
      <td>USA</td>
      <td>328,200,000</td>
      <td style="color:#3FC49F">9,834,000 km2</td>
    </tr>
    <tr style="border-bottom-style:ridge">
      <td>Mexico</td>
      <td>126,200,000</td>
      <td style="color:#3FC49F">1,973,000 km2</td>
    </tr>
    <tr>
      <td rspan="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>UK</td>
      <td>66,650,000</td>
      <td style="color:#3FC49F">242,500 km2</td>
    </tr>
    <tr>
      <td>France</td>
      <td>66,990,000</td>
      <td style="color:#3FC49F">643,800 km2</td>
    </tr>
    <tr>
      <td>Germany</td>
      <td>83,020,000</td>
      <td style="color:#3FC49F">357,400 km2</td>
    </tr>
  </tbody>
</table>

html firefox safari

2022-09-30 19:28

1 Answers

I guess it's a Firefox and Safari bug.

The only way to avoid this is by specifying width and height or width and white-space:nowrap.

2022-09-30 19:28

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656