如何增加 HTML 中表格列之间的距离？

Question

假设我想创建一个单行表格，每列之间有 50 个像素，但顶部和底部有 10 个像素的填充。

我该如何在 HTML/CSS 中做到这一点？

Answer 1

不需要假

<td>

。请使用

border-spacing

来代替。像这样应用它：

table {
  border-collapse: separate;
  border-spacing: 50px 0;
}

td {
  padding: 10px 0;
}

<table>
  <tr>
    <td>First Column</td>
    <td>Second Column</td>
    <td>Third Column</td>
  </tr>
</table>

看到它在行动。

Answer 2

将

<td>

的宽度设置为

50px

，然后添加您的

<td>

+ 另一个假

<td>

小提琴。

table tr td:empty {
  width: 50px;
}
  
table tr td {
  padding-top: 10px;
  padding-bottom: 10px;
}

<table>
  <tr>
    <td>First Column</td>
    <td></td>
    <td>Second Column</td>
    <td></td>
    <td>Third Column</td>
  </tr>
</table>

代码解释：

第一个CSS规则检查空td并给它们50px的宽度，然后第二个规则为所有td提供顶部和底部的填充。

Answer 3

您可以只使用填充。像这样：

http://jsfiddle.net/davidja/KG8Kv/

HTML

   <table>
        <tr>
            <td>item1</td>
            <td>item2</td>
            <td>item2</td>
        </tr>
    </table>

CSS

 td {padding:10px 25px 10px 25px;}

或

 tr td:first-child {padding-left:0px;}
 td {padding:10px 0px 10px 50px;}

Answer 4

如果我理解正确的话，你想要这个小提琴。

table {
  background: gray;
}
td {    
  display: block;
  float: left;
  padding: 10px 0;
  margin-right:50px;
  background: white;
}
td:last-child {
  margin-right: 0;
}

<table>
  <tr>
    <td>Hello HTML!</td>
    <td>Hello CSS!</td>
    <td>Hello JS!</td>
  </tr>
</table>

Answer 5

比所选答案更好的解决方案是使用边框大小而不是边框间距。使用边框间距的主要问题是，即使第一列前面也会有间距。

例如，

table {
  border-collapse: separate;
  border-spacing: 80px 0;
}

td {
  padding: 10px 0;
}

<table>
  <tr>
    <td>First Column</td>
    <td>Second Column</td>
    <td>Third Column</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>

要避免这种使用：

border-left: 100px solid #FFF;

并为第一列设置

border:0px

。

例如，

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

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

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

Answer 6

尝试

padding : 10px 10px 10px 10px;

Answer 7

如果您需要给出两行之间的距离，请使用此标签

margin-top: 10px !important;