CSS表格样式 - 表格中心边框之间的间距答案

【问题标题】：CSS table style - spacing between center borders of tableCSS表格样式 - 表格中心边框之间的间距
【发布时间】：2020-05-21 07:40:05
【问题描述】：

我想在“a 的测量”右侧边框和“下载 b 的”左侧边框之间沿该边框列留一个空格，但我不确定需要什么，因为我只知道 border-collapse。我只想要一个 2px-5px 的间隙，足以说明测量值不一样。

JavaScript：

innerHTML = '<table class="tableRes" id="tableRes">\
    <thead><tr><th colspan="4">Test</th></tr></thead>\
    <tr><td>upload a</td><td>a's measurement</td><td>download b</td><td>b's measurement</td></tr>\
    <tr><td>upload c</td><td>c's measurement</td><td>download d</td><td>d's measurement</td></tr>\
    <tr><td>upload e</td><td>e's measurement</td><td>download f</td><td>f's measurement</td></tr>\
    <tr><td>upload g</td><td>g's measurement</td><td>download h</td><td>h's measurement</td></tr>\
    </table>';

CSS：

.tableRes {
  border: 1px solid black;
  border-collapse: collapse;
  background-color: #ADD8E6;
  margin-left: auto;
  margin-right: auto;
}
.th, td {
  border: 1px solid black;
}

【问题讨论】：

标签： javascript html css html-table

【解决方案1】：

您可以在每一行中插入一个空的td 作为第三个单元格，并通过 css (:nth-child(3)) 将其设置为没有边框和一定的宽度：

.tableRes {
  border: 1px solid black;
  border-collapse: collapse;
  background-color: #ADD8E6;
  margin-left: auto;
  margin-right: auto;
}

th,
td {
  border: 1px solid black;
}

td:nth-child(3) {
  width: 15px;
  border: none;
}

<table class= "tableRes">
  <thead>
    <tr>
      <th colspan="5">Test</th>
    </tr>
  </thead>
  <tr>
    <td>upload a</td>
    <td>a's measurement</td>
    <td></td>
    <td>download b</td>
    <td>b's measurement</td>
  </tr>
  <tr>
    <td>upload c</td>
    <td>c's measurement</td>
    <td></td>
    <td>download d</td>
    <td>d's measurement</td>
  </tr>
  <tr>
    <td>upload e</td>
    <td>e's measurement</td>
    <td></td>
    <td>download f</td>
    <td>f's measurement</td>
  </tr>
  <tr>
    <td>upload g</td>
    <td>g's measurement</td>
    <td></td>
    <td>download h</td>
    <td>h's measurement</td>
  </tr>
</table>

【讨论】：

【解决方案2】：

td {
    padding: 2px 6px; //table elements doesn't get affected by margin
}

【讨论】：