HTMLのテーブルタグでの表示をCSSだけでSafariでもGoogle Chromeと同じ見た目にする方法を教えてください

実現したいこと

Safari でも Google Chrome と同じ見た目になるようにCSSだけで調整したいです

発生している問題

↓Google Chrome での表示(この表示に統一したい)

↓Safari での表示(余計なスペースが入っている)

該当のソースコード

html
1<html>
2  <head>
3    <link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.css" rel="stylesheet">
4    <style>
5      td {
6        border: 1px solid black;
7      }
8    </style>
9  </head>
10
11  <body>
12    <table>
13      <tr>
14        <td rowspan="12">
15          X<br>X<br>X
16        </td>
17        <td rowspan="3">X</td>
18        <td rowspan="6">X</td>
19        <td rowspan="6">X</td>
20        <td rowspan="8">X</td>
21        <td colspan="2" rowspan="4">X</td>
22      </tr>
23      <tr>
24      </tr>
25      <tr>
26      </tr>
27      <tr>
28        <td rowspan="3">X</td>
29      </tr>
30      <tr>
31        <td colspan="2" rowspan="4">X</td>
32      </tr>
33      <tr>
34      </tr>
35      <tr>
36        <td rowspan="3">X</td>
37        <td rowspan="6">X</td>
38        <td rowspan="6">X</td>
39      </tr>
40      <tr>
41      </tr>
42      <tr>
43        <td colspan="2" rowspan="4">X</td>
44        <td rowspan="4">X</td>
45      </tr>
46      <tr>
47        <td rowspan="3">X</td>
48      </tr>
49      <tr>
50      </tr>
51      <tr>
52      </tr>
53    </table>
54  </body>
55</html>

試したこと

table に height 指定 → 変化なし
td に height 指定 → 変化なし
td に line-height: 1em 指定 → Safari の方は小さくなるが、Google Chrome の方がもっと小さくなってしまう
normalize.css を適用 → 変化なし

補足情報（FW/ツールのバージョンなど）

macOS用 Google Chrome 75.0.3770.100（Official Build）(最新)
macOS用 Safari 12.1.1

m.ts10806

2019/07/02 08:19

空の<tr></tr>は何のために入れているのでしょうか。

ginkan

2019/07/02 08:45

ややこしいのですが縦12行のグリッドを想定しており上の行の td の rowspan の影響で下の方の td を省略する部分が増え、その結果 td がない tr が出てきています

行動規範の内容に同意します

回答2件

空の行とかだめでしょ・・・
ダミーで１列追加すればよいのでは？

CSS
1<html>
2  <head>
3    <style>
4      td {
5        border: 1px solid black;
6      }
7      td.hide {
8        border: 0px solid;
9        height:0px;
10        line-height:0px;
11      }
12    </style>
13  </head>
14
15  <body>
16    <table>
17      <tr>
18        <td rowspan="12">
19          X<br>X<br>X
20        </td>
21        <td rowspan="3">X</td>
22        <td rowspan="6">X</td>
23        <td rowspan="6">X</td>
24        <td rowspan="8">X</td>
25        <td colspan="2" rowspan="4">X</td>
26        <td class="hide">&nbsp</td>
27          </tr>
28      <tr>
29        <td class="hide">&nbsp</td>
30      </tr>
31      <tr>
32        <td class="hide">&nbsp</td>
33      </tr>
34      <tr>
35        <td rowspan="3">X</td>
36        <td class="hide">&nbsp</td>
37      </tr>
38      <tr>
39        <td colspan="2" rowspan="4">X</td>
40        <td class="hide">&nbsp</td>
41      </tr>
42      <tr>
43        <td class="hide">&nbsp</td>
44      </tr>
45      <tr>
46        <td rowspan="3">X</td>
47        <td rowspan="6">X</td>
48        <td rowspan="6">X</td>
49        <td class="hide">&nbsp</td>
50      </tr>
51      <tr>
52        <td class="hide">&nbsp</td>
53      </tr>
54      <tr>
55        <td colspan="2" rowspan="4">X</td>
56        <td rowspan="4">X</td>
57        <td class="hide">&nbsp</td>
58      </tr>
59      <tr>
60        <td rowspan="3">X</td>
61        <td class="hide">&nbsp</td>
62      </tr>
63      <tr>
64        <td class="hide">&nbsp</td>
65      </tr>
66      <tr>
67        <td class="hide">&nbsp</td>
68      </tr>
69    </table>
70  </body>
71</html>

投稿2019/07/02 08:18

yambejp

総合スコア114775

ginkan

2019/07/02 08:59

考えてくださってありがとうございます。Safari でも同じ見た目になりました。ただ rowspan の適用範囲に、ないはずの td が存在するのはHTMLの構造的に正しくない気がしております。

yambejp

2019/07/02 09:05

> ないはずの td が存在するのはHTMLの構造的に正しくないいやそうではありません命題のHTMLが構造的におかしいのですすべての行に最低でも１つのセルがないとサイズが確定できなくいなっていますたとえば１~3行目には何一つ高さを確定できるセルがありません。そんな構造の表というものが想定できません。

ginkan

2019/07/02 09:26

あらためて調べてみましたが rowspan や colspan でセルが結合されると、結合されたセルは書かないようにするそうです

行動規範の内容に同意します