css 向HTML表添加间隔符列

2lpgd968  于 2023-04-01  发布在  其他
关注(0)|答案(3)|浏览(128)

我需要在一个长的13列表格中布局数据。但是它需要看起来像两个表格,第10列和第11列之间有一些空间。在HTML中如何做到这一点?我的第一个想法是一个14列的表格,第11列占用空间但不可见。我不知道如何做到这一点,虽然。

wwodge7n

wwodge7n1#

如果您不希望表格单元格为空(这对于视力受损的人来说可能很奇怪),请尝试以下操作。

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

ljsrvy3e2#

我认为这更像是一个CSS问题,但它可以很容易地用:nth-child完成。创建空的表格单元格作为第11列,并用途:

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

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

ibrsph3r

ibrsph3r3#

试试这个例子,看看它是否符合你的喜好... 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>

相关问题