表中列之间的间距答案

【问题标题】：Spacing between columns in a table表中列之间的间距
【发布时间】：2017-11-09 19:04:06
【问题描述】：

我对表格中的列间距有一个大问题。这是我想要得到的，只有<td>之间的间距：

不适用于margin、padding 或border：

td {
  padding-left: 7.5px;
  padding-right: 7.5px;
}

td:first-child {
  padding-left: 0;
}

td:last-child {
  padding-right: 0;
}

<td></td>
<td></td>
<td></td>
<td></td>

不适用于border-spacing：

如果使用first-child 和last-child，问题与上一张图片相同。

我找到了解决方案，但真的很脏：

.spacer {
  width: 15px;
  height: 15px;
}

<td></td>
<div id="spacer"></div>
<td></td>
<div id="spacer"></div>
<td></td>
<div id="spacer"></div>
<td></td>

【问题讨论】：

您要删除或添加 15px 间距吗？
这个怎么样？ stackoverflow.com/questions/2070817/…
您不能撤消由border-spacing 和margin: -15px 为table 创建的不需要的间距吗？
@IlyaStreltsyn 很遗憾没有！
@Swellar 我只想在 td 之间获得 15px 的间距。示例：谢谢

标签： css html-table spacing

【解决方案1】：

1) 当您想在其上使用 css 时，您必须为表格使用标准结构。

改变：

<td></td>
<td></td>
<td></td>
<td></td>

收件人：

<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>   
</table>

2) 如果需要TDs 之间的空间，请将border-spacing:30px 0px; 添加到表中。

td {
  padding-left: 7.5px;
  padding-right: 7.5px;
  background-color: orange;
}

td:first-child {
  padding-left: 0;
}

td:last-child {
  padding-right: 0;
}

table {
    border-spacing:30px 0px;
  }

<table>
   <tr>
	<td>TD1</td>
	<td>TD2</td>
	<td>TD3</td>
	<td>TD4</td>
   </tr>	
</table>

【讨论】：

关于标准结构的好点，但不幸的是这不是问题的答案。请再次阅读并编辑您的答案。
感谢您的回复，但是通过这种方式我们会遇到问题，我在图片 n°2 i.imgur.com/OVtjnu1.png 中显示

【解决方案2】：

使用border-spacing: 15px 0px 仅生成水平间距；
要不只显示左右间距，可以将表格包裹在一个 div 中，并将margin: 0px -15px 设置为表格。然后，将overflow: hidden; 设置为 div 如何隐藏额外的左右间距。

td {
  padding-left: 7.5px;
  padding-right: 7.5px;
  background-color: red;
  height: 40px;
  border: 1px solid green;
  width: 25%;
}

td:first-child {
  padding-left: 0;
}

td:last-child {
  padding-right: 0;
}

table {
  width: calc(100% + 30px);
  table-layout: fixed;
  border-spacing: 15px 0px;
  background: green;
  margin: 0px -15px;
}

.table-container {
  overflow: hidden;
  width: 400px;
  margin: 0 auto;
}

<div class="table-container">
  <table>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </table>
</div>

【讨论】：

【解决方案3】：

请改用<div> 和margin。

.table {
  width: 100%;
  height: 500px;
}

.row {
  width: 100%;
  height: 100%;
}

.cell {
  float: left; /* make the divs sit next to each other like cells */
  background: red;
  width: calc(25% - 12px); /* 4 cells so 25% but minus 12 because we have 3 x 15px margins divided by 4 cells which is 11.25 but decimals can cause issues in some browsers */
  height: 100%;
  margin-left: 15px;
}

.cell:first-child {
  margin-left: 0;
}

<div class="table">
  <div class="row">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
  </div>
</div>

【讨论】：

感谢您的回复，您已经很好地理解了我的问题，您的回复似乎有效！但是通过这种方式，我们需要知道有多少单元格（对于 4 个单元格：calc(25% - 12px)），可以自动执行吗？还是谢谢
@PierreArkona 是的，这是一个混乱的解决方案。您可以为不同的表设置不同的类，例如<div class="table 4cols"> 并在 css 中声明不同的宽度，例如.4cols .cell { width: calc(25% - 12px); }
谢谢，我想我会把你的方式与 javascript 结合起来，让它 100% 自动运行！

【解决方案4】：

尝试使用cellspacing属性。

<table cellspacing="10">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

【讨论】：

感谢您的回复，但是通过这种方式，td 的i.stack.imgur.com/gOv3P.png 周围会有多余的边距