如何在表格的某些列之间添加间距？

Posted 2023-03-05

【中文标题】如何在表格的某些列之间添加间距？

【英文标题】：How to add spacing between certain columns of a table?

【发布时间】：2016-11-10 07:43:11

【问题描述】：

我想制作一张这样的表格：

C 和 D、D 和 E、F 和 G 之间应该有间距。但任何其他列之间不应有任何间距，例如 A 和 B。

这是我目前拥有的：

JSFiddle：https://jsfiddle.net/e33cbkh3/1/

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

thead 
background: orange;


th, td 
text-align: center;
border: none !important;

<table class="table table-striped table-bordered table-hover">
  <thead>
    <tr>
      <th colspan="3"></th>
      <th></th>
      <th colspan="2"> XYZ </th>
      <th></th>
    </tr>
    <tr>
      <th>A</th>
      <th>B</th>
      <th>C</th>
      <th>D</th>
      <th>E</th>
      <th>F</th>
      <th>G</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
    </tr>
  </tbody>
</table>

【参考方案1】：

最简单的解决方案是在表格中添加一些额外的空列：

HTML

<table class="table">
  <thead>
    <tr>
      <th colspan="3"></th>
      <th class="space"></th>
      <th></th>
      <th class="space"></th>
      <th colspan="2"> XYZ </th>
      <th class="space"></th>
      <th></th>
    </tr>
    <tr>
      <th>A</th>
      <th>B</th>
      <th>C</th>
      <th class="space"></th>
      <th>D</th>
      <th class="space"></th>
      <th>E</th>
      <th>F</th>
      <th class="space"></th>
      <th>G</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td class="space"></td>
      <td>4</td>
      <td class="space"></td>
      <td>5</td>
      <td>6</td>
      <td class="space"></td>
      <td>7</td>
    </tr>
  </tbody>
</table>

CSS

/* make the cells appear to be empty */
.space 
  background: none;
  /* make the width small, but setting it to 0 will actual default to the same width as other cells */
  width: 0.1rem;

您还需要将thead 背景颜色移动到th 元素：

th 
  background: orange;

JSFiddle：https://jsfiddle.net/L43weozq/

【讨论】：

在使用包含表格支持的 Markdown 到 html 转换器时，这对我有用。

【参考方案2】：

通过伪类：https://jsfiddle.net/glebkema/y4ff5m61/

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

thead 
  background: orange;


th, td 
  text-align: center;
  border: none !important;


tr:first-child > th:not(:last-child),
tr:last-child > th:nth-child(3), td:nth-child(3),
tr:last-child > th:nth-child(4), td:nth-child(4),
tr:last-child > th:nth-child(6), td:nth-child(6) 
  border-right: 15px solid white !important;

<table class="table table-striped table-bordered table-hover">
  <thead>
    <tr>
      <th colspan="3"></th>
      <th></th>
      <th colspan="2">XYZ</th>
      <th></th>
    </tr>
    <tr>
      <th>A</th>
      <th>B</th>
      <th>C</th>
      <th>D</th>
      <th>E</th>
      <th>F</th>
      <th>G</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
    </tr>
  </tbody>
</table>

【讨论】：

谢谢！这行得通，但我确实发现使用空间类的风格更好。