Question

我正在尝试创建一个包含1行和8列的表。但是，我想在第3和第6个表格单元格后面留一个空格。结果应该是：

细胞细胞空白细胞细胞空白细胞

我尝试过设置保证金，但他们没有工作。我已尝试实现此代码，但它无法正常工作。

.brzl td:nth-child(3){
    margin-right: 20px;
}

修改

我正在尝试在AngularJS项目中实现它。在index.html中，我有以下代码：

<div ng-switch-when="brzl">
    <table class="brzl">
        <tbody>
            <tr>
                 <td ng-repeat="cell in mini.vrednost track by $index">
                      {{ cell }}
                 </td>
            </tr>
        </tbody>
    </table>
    <label class="small-label"> {{ mini.label }} </label>
</div>

mini.vrednost基本上循环一些JSON数据（例如＆＃34; 123456789＆＃34;）。每个数字必须放在表格的单独单元格中。现在，一旦＆＃39; 1＆＃39;＆＃39; 2＆＃39;和＆＃39; 3＆＃39;已放置在牢房中，我需要在它们后面放一个空场，然后继续使用＆＃39; 4＆＃39; 5＆＃39; 5＆＃39;无法从JSON数据中读取空字段，因为已经从某处读取了整个字符串（我想是数据库）。

我知道我早些时候应该提到这一点。那是我的坏事。

Answer 1

Margin不适用于表格单元格。但是，padding会这样做。当然，如果您为表添加了边框，这意味着您将获得一个具有大量空白区域的单元格。

Fiddle

你可以做什么（通过硬编码或通过注入Javascript或jQuery）添加一个空白单元格，你想要空白区域，通过CSS删除该单元格的任何样式并添加宽度。

Working fiddle

<强> HTML

<table>
    <tbody>
        <tr>
            <td>cell</td>
            <td>cell2</td>
            <td>cell3</td>
            <td></td> <!-- blank cell, no border -->
            <td>cell4</td>
            <td>cell5</td>
            <td>cell6</td>
            <td></td> <!-- blank cell, no border -->
            <td>cell7</td>
        </tr>
    </tbody>
</table>

<强> CSS

td {
    border: 1px solid #ccc;
}

td:nth-child(4n+4){
    border: none;
    width: 30px; /*desired blank space*/
}

正如您所看到的，从第4个开始，您必须定位每个第4个细胞。如果您有任何疑问，请询问，我会看看我是否可以相应地调整答案。

OP编辑后更新

但是，由于某些脚本的表填充了数据，因此您可能希望在完成循环填充表后运行以下jQuery。我不知道它会如何对包含大量内容的大表做出反应，但它可以在下面更新的Fiddle中使用。

$('tr > td:nth-child(3n+3)').after('<td></td>');

这个jQuery从第3个孩子开始每个第3个孩子，然后为它添加一个空<td>，然后由CSS设置样式。当然，您可以使用特定类添加<td>，然后使用CSS进行定位，但就像现在一样，它似乎工作正常。

<强> Fiddle

记得添加jQuery！

Answer 2

正如我告诉过你的，你不能使用保证金，但你可以试试这种方法 -

table { 
    width: 100%;
}
td{
    background: #ccc;
    padding: 10px;
    text-align: center;
}
td:nth-child(3n){
    background: #fff;
}

<table width="50%">
        <tbody>
        <tr>
             <td>data</td>
             <td>data</td>
             <td>&nbsp;</td>
             <td>data</td>
             <td>data</td>
             <td>&nbsp;</td>
             <td>data</td>
             <td>data</td>
        </tr>
    </tbody>
</table>

或者您可以尝试在nth-child

右侧设置边框

table { 
    border-collapse: collapse;
}
td{
    background: #ccc;
    padding: 10px;
}
td:nth-child(3n){
    border-right:10px solid #fff;
}

<table width="50%">
    <tbody>
        <tr>
             <td>data</td>
             <td>data</td>
             <td>data</td>
             <td>data</td>
             <td>data</td>
             <td>data</td>
             <td>data</td>
             <td>data</td>
        </tr>
    </tbody>
</table>

Answer 3

请尝试以下操作： Demo

td {
    border: 1px solid #ccc;
    padding:10px;
}

td:nth-child(4n) {
   border-color: #fff;     
}

HTML：

<table>
    <tr>
        <td>test</td>
        <td>test</td>
        <td>test</td>
        <td></td> <!-- 3,6,... cols should be empty to get blank space -->
        <td>test</td>
        <td>test</td>
        <td>test</td>
        <td></td>
        <td>test</td>
    </tr>
</table>

第n个单元格后面的空格表

3 个答案: