Table 第 n 个单元格后有空格

Question

我正在尝试创建一个具有 1 行和 8 列的 table。但是，我想要在第 3 个和第 6 个 table 单元格之后有一个空白 spaces。结果应该是：

单元格单元格空白space单元格单元格空白space单元格单元格

我试过放置边距，但它们不起作用。我已经尝试实现此代码，但它不起作用。

.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 数据（例如“123456789”）。每个数字都必须放在 table 中的单独单元格中。现在，将“1”、“2”和“3”放入单元格后，我需要在它们之后放置一个空字段，然后继续“4”、“5”等。空字段不能从 JSON 数据中读取，因为整个字符串已经从某个地方读取（我想是数据库）。

我知道我应该早点提到这个。那是我的错。

Answer 1

Margin 不适用于 table 单元格。但是，padding 会。当然，如果您在 table 中添加了边框，这意味着您会得到一个包含大量白色 space 的单元格。

Fiddle

你可以做的（通过硬编码或注入 Javascript 或 jQuery）是在你想要白色 space 的地方添加一个空白单元格，删除它的任何样式通过 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 编辑后更新

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

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

这块 jQuery 从第 3 个开始，每隔 3 个子元素添加一个空的 <td>，然后由 CSS 设置样式。当然，您可以使用特定的 class 为 <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>

Table 第 n 个单元格后有空格

Table with blank spaces after nth cell

html

css

html-table

css-tables