如何扩大 table 列之间的差距？ css-table

Question

我有一个包含两列的简单 table，我想扩大列之间的间距。我试过 column-gap 属性但没有成功。我怎样才能拉开差距？

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

Answer 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 是一个 post 可以提供帮助。

Answer 2

您可以使用 border-spacing，如 pseudoAJ 的答案所示。但问题是，如果您设置垂直边框间距，您会在 table 的 left/right 上得到 space。

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

例如，设置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>

如何扩大 table 列之间的差距？ css-table

How do I widen the gap between table colums? css-table

html

css

css-tables