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>

私は、あなたがどこを探して何これを願っています。