向 HTML 表格添加间隔列

Question

我需要在一个包含 13 列的长表中布置数据。但它需要看起来像两个表格，在第 10 列和第 11 列之间有一些空间。这在 HTML 中是如何完成的？我的第一个想法是一个 14 列的表，第 11 列占用空间但不可见。不过，我不知道该怎么做。

Answer 1

如果您不想让表格单元格为空，这对视障人士来说可能很奇怪，请试试这个。

td {
  display: inline-block;
  background: pink;
}

td.spaced {
  margin-left: 20px;
}

<table>
  <tr>
    <td>One</td>
    <td>Two</td>
    <td class="spaced">Three</td>
  </tr>
</table>

Answer 2

我认为这更像是一个 CSS 问题，但可以使用

:nth-child

轻松完成。创建空表格单元格作为第 11 列并使用：

td:nth-child(11) {
    border: 0;
}

http://jsfiddle.net/ExplosionPIlls/rZYRd/

Answer 3

试试这个例子，看看它是否符合你的喜好……5 列，2 列和 4 列之间有一个间隔。它可以改进，但我认为它有你想要的样子。

<table cols=5 style='border:thin solid blue'>
  <tr>
    <th style='border:thin solid blue'>Col 1</th>
    <th style='border:thin solid blue'>Col 2</th>
    <th>&nbsp</th>
    <th style='border:thin solid blue'>Col 3</th>
    <th style='border:thin solid blue'>Col 4</th>
  </tr>
  <tr>
    <td style='border:thin solid blue'>Col 1A</th>
    <td style='border:thin solid blue'>Col 1B</th>
    <td>&nbsp</th>
    <td style='border:thin solid blue'>Col 1D</th>
    <td style='border:thin solid blue'>Cell 1E</th>
  </tr>
</table>