如何增加 HTML 中表格列之间的距离？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17469483/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to increase the distance between table columns in HTML?
提问by idude
Let's say I wanted to create a single-rowed table with 50 pixels in between each column, but 10 pixels padding on top and the bottom.
假设我想创建一个单行表格，每列之间有 50 个像素，但顶部和底部填充 10 个像素。
How would I do this in HTML/CSS?
我将如何在 HTML/CSS 中做到这一点？
回答by daniels
There isn't any need for fake <td>s. Make use of border-spacinginstead. Apply it like this:
不需要假<td>的。利用border-spacing代替。像这样应用它：
HTML:
HTML：
<table>
<tr>
<td>First Column</td>
<td>Second Column</td>
<td>Third Column</td>
</tr>
</table>
CSS:
CSS：
table {
border-collapse: separate;
border-spacing: 50px 0;
}
td {
padding: 10px 0;
}
See it in action.
看到它在行动。
回答by Mohammad Areeb Siddiqui
Set the width of the <td>s to 50pxand then add your <td>+ another fake <td>
将<td>s的宽度设置为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>Code Explained:
代码解释：
The first CSS rule checks for empty td's and give them a width of 50px then the second rule give the padding of top and bottom to all the td's.
第一个 CSS 规则检查空的 td 并为它们提供 50px 的宽度，然后第二个规则为所有 td 提供顶部和底部的填充。
回答by Igor
If I understand correctly, you want this fiddle.
如果我理解正确，你想要这个小提琴。
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>回答by David Allen
You can just use padding. Like so:
你可以只使用填充。像这样：
http://jsfiddle.net/davidja/KG8Kv/
http://jsfiddle.net/davidja/KG8Kv/
HTML
HTML
<table>
<tr>
<td>item1</td>
<td>item2</td>
<td>item2</td>
</tr>
</table>
CSS
CSS
td {padding:10px 25px 10px 25px;}
OR
或者
tr td:first-child {padding-left:0px;}
td {padding:10px 0px 10px 50px;}
回答by Ani Menon
A better solution than selected answer would be to use border-size rather than border-spacing. The main problem with using border-spacing is that even the first column would have a spacing in the front.
比选定答案更好的解决方案是使用边框大小而不是边框间距。使用边框间距的主要问题是即使第一列在前面也会有间距。
For example,
例如，
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>To avoid this use: border-left: 100px solid #FFF;and set border:0pxfor the first column.
为了避免这种使用：border-left: 100px solid #FFF;并设置border:0px为第一列。
For example,
例如，
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>回答by Chetan Gawai
Try
尝试
padding : 10px 10px 10px 10px;
回答by santosh
If you need to give a distance between two rows use this tag
如果您需要给出两行之间的距离，请使用此标签
margin-top: 10px !important;
