如何扩大表格列之间的差距？ css 表答案

【问题标题】：How do I widen the gap between table colums? css-table如何扩大表格列之间的差距？ css 表
【发布时间】：2016-09-30 23:44:18
【问题描述】：

我有一个包含两列的简单表格，我想扩大列之间的间距。我已经尝试了 column-gap 属性，但没有成功。如何拉开差距？

JSFiddle

      #t td {
        -webkit-column-gap: 40px;
        -moz-column-gap: 40px;
        column-gap: 40px;
      }
      #t tr:hover {
        background-color: #00FF00;
      }
      #t tr:first-child {
        font-weight: bold;
      }

<table id="t">
  <tr>
    <td>Column1</td>
    <td>Column2</td>
  </tr>
  <tr>
    <td>1000</td>
    <td>2000</td>
  </tr>
</table>

【问题讨论】：

标签： html css css-tables

【解决方案1】：

使用border-spacing 属性并为table 添加css。这是工作示例：

演示：jsfiddle

#t td {
  -webkit-column-gap: 40px;
  -moz-column-gap: 40px;
  column-gap: 40px;
}
#t tr:hover {
  background-color: #00FF00;
}
#t tr:first-child {
  font-weight: bold;
}
table {
  border-collapse: separate;
  border-spacing: 50px 0;
}

<table id="t">
  <tr>
    <td>Column1</td>
    <td>Column2</td>
  </tr>
  <tr>
    <td>1000</td>
    <td>2000</td>
  </tr>
</table>

此外，here 是一个可以提供帮助的帖子。

【讨论】：

@rks 这不是最佳答案：The extra space on the left

【解决方案2】：

您可以使用 pseudoAJ 的答案中所示的边框间距。但问题是，如果您设置垂直边框间距，您会在表格的左侧/右侧获得一个空格。

因此更好的选择是使用边框大小。

例如，为第一列设置border-left: 100px solid #FFF; 并设置border:0px。

tr:hover {
   background-color: #00FF00;
 }
 tr:first-child {
   font-weight: bold;
 }

td,th{
  border-left: 100px solid #FFF;
}

 tr>td:first-child {
   border:0px;
 }

<table id="t">
  <tr>
    <td>Column1</td>
    <td>Column2</td>
  </tr>
  <tr>
    <td>1000</td>
    <td>2000</td>
  </tr>
</table>

【讨论】：

在实践中，我建议使用背景颜色#FFF0; （alpha 为 0，因此它是透明的）因此，如果您有任何行悬停颜色更改效果（出于可访问性原因您应该这样做），您不会像示例中那样看到白框。（但是，这对示例有好处，以便您了解发生了什么）