使用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>

我希望这个什么什么的您要寻找的。