Question

我没有很多css样式表的经验（基本理解，但那就是它）。

我需要获得类似的东西：

＆＃13;

table {
    border-collapse: collapse;
}

td {
    border: 1px solid black;
}

.space {
    height: 10px;
    width: 10px;
    border: none
}

＆＃13;

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

＆＃13;

实例：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>

我希望这就是你在寻找什么。

使用CSS在某些行/列之间进行间隔

1 个答案: