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

时间:2013-07-04 11:46:34

标签: html css html-table padding

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

我如何在HTML / CSS中执行此操作?

6 个答案:

答案 0 :(得分:73)

不需要伪造<td>。请改用border-spacing。像这样应用:

<强> HTML:

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

<强> CSS:

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

td {
  padding: 10px 0;
}

查看 in action

答案 1 :(得分:12)

<td>的宽度设置为50px,然后添加<td> +另一个假<td>

Fiddle.

<强> HTML:

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

<强> CSS

table tr td:empty {
    width: 50px;
}

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

代码说明:

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

答案 2 :(得分:9)

如果我理解正确,您需要fiddle

<强> HTML:

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

<强> CSS:

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

答案 3 :(得分:7)

你可以使用填充。像这样:

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

OR

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

答案 4 :(得分:5)

比选择的答案更好的解决方案是使用border-size而不是border-spacing。使用边界间距的主要问题是即使第一列在前面也会有间距。

例如,

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>

答案 5 :(得分:4)

尝试

padding : 10px 10px 10px 10px;