使用CSS的某些行/列之間的間距

Question

我對css樣式表沒有太多的經驗（基本瞭解，但就是這樣）。

我需要獲得類似這樣：

table { 
 
    border-collapse: collapse; 
 
} 
 

 
td { 
 
    border: 1px solid black; 
 
} 
 

 
.space { 
 
    height: 10px; 
 
    width: 10px; 
 
    border: none 
 
}

<table> 
 
     <tr> 
 
     <td id="1_1">1_1</td> 
 
     <td class="space"></td> 
 
     <td id="1_2">1_2</td> 
 
     <td id="1_3">1_3</td> 
 
     <td id="1_4">1_4</td> 
 
     <td id="1_5">1_5</td> 
 
     </tr> 
 
     <tr> 
 
     <td class="space"></td> 
 
     <td class="space"></td> 
 
     <td class="space"></td> 
 
     <td class="space"></td> 
 
     <td class="space"></td> 
 
     <td class="space"></td> 
 
     </tr> 
 
     <tr> 
 
     <td id="2_1">2_1</td> 
 
     <td class="space"></td> 
 
     <td id="2_2">2_2</td> 
 
     <td id="2_3">2_3</td> 
 
     <td id="2_4">2_4</td> 
 
     <td id="2_5">2_5</td> 
 
     </tr> 
 
</table>

活生生的例子：https://jsfiddle.net/7Lhwb0f3/

我需要做的是不添加空tr和空td秒。我必須自動生成樣式表，因此我無法對其進行修改，它所具有的唯一元素是您可以在示例中直觀看到的元素。

我試圖尋找替代品，但我發現所有的樣式都受到影響所有內部空間，而不是我特別需要的。任何幫助將不勝感激！

Answer 1

這可以用一些css來實現，請考慮下面的HTML。

HTML

table { 
 
    border-collapse: collapse; 
 
} 
 

 
tr { 
 
    margin-bottom: 10px; 
 
    display: block; 
 
} 
 

 
td:first-child { 
 
    margin-right: 10px; 
 
    display: inline-block; 
 
    float: left; 
 
} 
 

 
td { 
 
    border: 1px solid black; 
 
}

<table> 
 
    <tr> 
 
     <td id="1_1">1_1</td> 
 
     <td id="1_2">1_2</td> 
 
     <td id="1_3">1_3</td> 
 
     <td id="1_4">1_4</td> 
 
     <td id="1_5">1_5</td> 
 
    </tr> 
 
    <tr> 
 
     <td id="2_1">2_1</td> 
 
     <td id="2_2">2_2</td> 
 
     <td id="2_3">2_3</td> 
 
     <td id="2_4">2_4</td> 
 
     <td id="2_5">2_5</td> 
 
    </tr> 
 
</table>

我希望這個什麼什麼的您要尋找的。