第 n 个单元格后有空格的表格答案

【问题标题】：Table with blank spaces after nth cell第 n 个单元格后有空格的表格
【发布时间】：2015-10-29 09:38:51
【问题描述】：

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

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

【问题讨论】：

margin 不适用于table row 或table cell
你可以改变宽度
考虑上传小提琴，因为我目前看到的唯一选择是提供填充而不是边距

标签： html css html-table css-tables

【解决方案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！

【讨论】：

请检查编辑部分。我没有提到一些事情。您建议的解决方案适用于手动插入的表格。
试试看是否可以，而不是用{{ cell }} 填充<td>，还可以将<td> 隐藏在{{ cell }} 变量中。这样，理论上你可以在{{ cell }} 变量每第三次输出一些东西后创建一个空的<td>。同时，我去看看能不能为你找到一个 jQuery 解决方案。
@Superiom 好吧，这很简单！让我知道它是否有效！
如果我在 {{ cell }} 部分中隐藏，则会打印出值 'cell'。
好的，所以继续你的操作 (<td> {{ cell }} </td>) 并添加一小行 jQuery 以在你的 {{ cell }} 填满的每三个 <td> 之后插入一个空白 <td> .

【解决方案3】：

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

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>

【讨论】：