Question

我有一个包含两列的简单表格，我想扩大列之间的差距。我已经尝试了柱间隙属性但没有成功。我怎样才能扩大差距？

＆＃13;

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

＆＃13;

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

＆＃13;

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是一个可以提供帮助的帖子。

Answer 2

您可以使用pseudoAJ的答案中显示的border-spacing。但问题是，如果你设置一个垂直的边框间距，你会在桌子的左/右边得到一个空格。

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

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

如何扩大表柱之间的差距？ CSS-表

2 个答案: