htmlのテーブル行を非表示にした際のボーダーの消し方

テーブルの行をdisplay:noneで非表示にした際、非表示行が連続するとその箇所のボーダーが通常行のボーダーより太くなってしまいます。
非表示行のボーダーが重なっていくことで太くなったのではと推測し、非表示行にborder-style:noneを設定しましたが解決できませんでした。
なにか良い方法はありませんでしょうか。

実装例:

2020/10/08 追加
borderによる罫線と推測しておりましたが、cellspacingによる罫線でした。
cellspacingを0とすると罫線の重なりはなくなりましたがテーブル全体の項目毎の区切りが無くなってしまいました。
display noneとしている行飲みcellspacingを0にすることは可能でしょうか。

firegrape

2020/10/07 01:01

htmlとcssを記載していただけると回答しやすいかと思います。どこにdisplay:noneを入れているかわからないですので。

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

回答2件

ボーダーをどのように表示しているのか不明ですが、下記のサンプルでは特に太くなるという現象は見られませんでした。

html
1<table>
2  <tr>
3    <th>項目1</th>
4    <th>項目2</th>
5  </tr>
6  <tr>
7    <td>1111</td>
8    <td>2222</td>
9  </tr>
10   <tr class="hidden">
11    <td>3333</td>
12    <td>4444</td>
13  </tr>
14   <tr class="hidden">
15    <td>5555</td>
16    <td>6666</td>
17  </tr>
18   <tr  class="hidden">
19    <td>7777</td>
20    <td>8888</td>
21  </tr>
22   <tr>
23    <td>9999</td>
24    <td>0000</td>
25  </tr>
26</table>

css
1table{
2  border-collapse: collapse; 
3}
4th, td{
5  border: 2px solid red;
6}
7.hidden {
8  display: none;
9}

投稿2020/10/07 02:58

hatena19

総合スコア34075

消え方を確認してみて下さい

HTML
1<table style="border-collapse: collapse;  border: 1px solid #ccc;">
2<tr>
3  <td style="background-color: #f00;">1</td>
4  <td style="background-color: #0f0;">2</td>
5</tr>
6<tr>
7  <td style="background-color: #00f; display:none">3</td>
8  <td style="background-color: #ff0; display:none">4</td>
9</tr>
10<tr style="display:none">
11  <td style="background-color: #0ff;">5</td>
12  <td style="background-color: #800;">6</td>
13</tr>
14<tr>
15  <td style="background-color: #080;">7</td>
16  <td style="background-color: #008;">8</td>
17</tr>
18</table>