在我的HTML文档中,我有一个包含两列和多行的表。如何用css增加第一列和第二列之间的空间?我试过申请“保证金权利:10px;”对于左侧的每个单元格,但没有效果。
答案 0 :(得分:145)
警告:尽管padding-right
可能会解决您的特定(视觉)问题,但在表格单元格之间添加间距并不正确。 padding-right
对单元格的作用类似于大多数其他元素的作用:它在单元格中添加 空间。如果单元格没有边框或背景颜色或其他让游戏消失的东西,这可以模仿在单元格之间设置空间的效果,但不是这样。
正如有人指出的那样,表格单元格会忽略边距规范:
CSS 2.1 Specification – Tables – Visual layout of table contents
生成内部表格元素 带内容的矩形框 边界。细胞也有填充物。 内部表元素没有 边距。
那么“正确”的方式是什么?如果您要替换表格的cellspacing
属性,则border-spacing
(禁用border-collapse
)是替代品。但是,如果需要每单元格“边距”,我不确定如何使用CSS正确实现。我能想到的唯一的黑客就是如上所述使用padding
,避免细胞的任何样式(背景颜色,边框等),而是使用单元格内的容器DIV来实现这样的样式。
我不是CSS专家,所以我在上面可能是错的(很高兴知道!我也想要一个表格单元边距CSS解决方案)。
干杯!
答案 1 :(得分:79)
将此应用到您的第一个<td>
:
padding-right:10px;
HTML示例:
<table>
<tr>
<td style="padding-right:10px">data</td>
<td>more data</td>
</tr>
</table>
答案 2 :(得分:23)
如果你不能使用填充(例如你在td中有边框)试试这个
table {
border-collapse: separate;
border-spacing: 2px;
}
答案 3 :(得分:14)
我意识到这是相当迟钝的,但是为了记录,您还可以使用CSS选择器来执行此操作(无需内联样式。)此CSS将填充应用于每行的第一列:
table > tr > td:first-child { padding-right:10px }
这将是你的HTML,没有CSS!:
<table><tr><td>data</td><td>more data</td></tr></table>
这样可以实现更优雅的标记,尤其是在需要使用CSS进行大量特定格式化的情况下。
答案 4 :(得分:14)
页边距在单个单元格上不起作用,但是你可以在两个单元格之间添加额外的列,你想在它们之间加一个空格......另一种选择是使用与背景颜色相同的边框...... / p>
答案 5 :(得分:8)
你可以这样做:
<html>
<table>
<tr>
<td>one</td>
<td width="10px"></td>
<td>two</td>
</tr>
</table>
</html>
不需要CSS :)这个10px是你的空间。
答案 6 :(得分:7)
试试padding-right
。您不能在单元格之间放置margin
。
<table>
<tr>
<td style="padding-right: 10px;">one</td>
<td>two</td>
</tr>
</table>
答案 7 :(得分:4)
此解决方案适用于td
,需要border
和padding
进行样式设置。
(在Chrome 32,IE 11,Firefox 25上测试)
CSS:
table {border-collapse: separate; border-spacing:0; } /* separate needed */
td { display: inline-block; width: 33% } /* Firefox need inline-block + width */
td { position: relative } /* needed to make td move */
td { left: 10px; } /* push all 10px */
td:first-child { left: 0px; } /* move back first 10px */
td:nth-child(3) { left: 20px; } /* push 3:rd another extra 10px */
/* to support older browsers we need a class on the td's we want to push
td.col1 { left: 0px; }
td.col2 { left: 10px; }
td.col3 { left: 20px; }
*/
HTML:
<table>
<tr>
<td class='col1'>Player</td>
<td class='col2'>Result</td>
<td class='col3'>Average</td>
</tr>
</table>
2016年更新
Firefox现在不支持inline-block
和设置width
table {border-collapse: separate; border-spacing:0; }
td { position: relative; padding: 5px; }
td { left: 10px; }
td:first-child { left: 0px; }
td:nth-child(3) { left: 20px; }
td { border: 1px solid gray; }
/* CSS table */
.table {display: table; }
.tr { display: table-row; }
.td { display: table-cell; }
.table { border-collapse: separate; border-spacing:0; }
.td { position: relative; padding: 5px; }
.td { left: 10px; }
.td:first-child { left: 0px; }
.td:nth-child(3) { left: 20px; }
.td { border: 1px solid gray; }
<table>
<tr>
<td>Player</td>
<td>Result</td>
<td>Average</td>
</tr>
</table>
<div class="table">
<div class="tr">
<div class="td">Player</div>
<div class="td">Result</div>
<div class="td">Average</div>
</div>
</div>
答案 8 :(得分:4)
使用 border-collapse:separate; 对我来说不起作用,因为我只需要在表格单元格之间没有边距。
我提出了下一个解决方案:
- 的 CSS 强>
.tableDiv{
display: table;
}
.cellSeperator {
display: table-cell;
width: 20px;
}
.cell1 {
display: table-cell;
width: 200px;
}
.cell2 {
display: table-cell;
width: 50px;
}
- 的 HTML 强>
<div class="tableDiv">
<div class="cell1"></div>
<div class="cellSeperator"></div>
<div class="cell2"></div>
</div>
答案 9 :(得分:2)
您不能以这种方式挑出单元格中的各个列。在我看来,您最好的选择是在第二列上添加style='padding-left:10px'
并在内部div或元素上应用样式。这样你就可以实现更大空间的幻觉。
答案 10 :(得分:2)
如果您可以控制表格的宽度,请在所有表格单元格上插入一个左边距,并在整个表格上插入一个负边距。
table {
margin-left: -20px;
width: 720px;
}
table td {
padding-left: 20px;
}
注意,表的宽度需要包括填充/边距宽度。以上面的例子为例,表格的视觉宽度为700px。
如果您在表格单元格上使用边框,这不是最佳解决方案。
答案 11 :(得分:2)
我发现解决这个问题的最好方法是尝试和错误的结合,并阅读我之前写的内容:
正如你所看到的,我有一些相当棘手的事情......但是让这看起来很好看的主要原因是:
父母元素(UL):边界崩溃:分开; border-spacing:.25em; margin-left:-.25em;
儿童元素(LI):显示:table-cell; vertical-align:middle;
<强> HTML 强>
<ul>
<li><span class="large">3</span>yr</li>
<li>in<br>stall</li>
<li><span class="large">9</span>x<span class="large">5</span></li>
<li>on<br>site</li>
<li>globe</li>
<li>back<br>to hp</li>
</ul>
<强> CSS 强>
ul { border: none !important; border-collapse: separate; border-spacing: .25em; margin: 0 0 0 -.25em; }
li { background: #767676 !important; display: table-cell; vertical-align: middle; position: relative; border-radius: 5px 0; text-align: center; color: white; padding: 0 !important; font-size: .65em; width: 4em; height: 3em; padding: .25em !important; line-height: .9; text-transform: uppercase; }
答案 12 :(得分:1)
根据Cian设置边框代替边距的解决方案,我发现您可以将边框颜色设置为透明,以避免与背景颜色匹配。适用于FF17,IE9,Chrome v23。看起来像是一个不错的解决方案,前提是您不需要实际的边框。
答案 13 :(得分:1)
<!DOCTYPE html>
<html>
<head>
<style>
table{
border-spacing: 16px 4px;
}
td {
border: 1px solid black;
}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>
&#13;
使用填充不是正确的方法,它可能会改变外观,但它不是你想要的。这可以解决您的问题。
答案 14 :(得分:1)
您可以同时使用它们:
padding-right:10px;
padding-right:10%;
但最好与%一起使用。
答案 15 :(得分:0)
如果填充不适合您,另一种方法是添加额外的列并使用<colgroup>
通过宽度设置边距。以上填充解决方案都没有对我有用,因为我试图给单元边框本身一个边距,这就是最终解决问题的原因:
<table>
<colgroup>
<col>
<col width="20px">
<col>
</colgroup>
<tr>
<td>data</td>
<td></td>
<td>more data</td>
</tr>
</table>
使用:nth-child设置表格单元格的边框样式,以便第2列和第3列显示为单列。
table tr td:nth-child(2) { border: 1px solid black; border-right:0; }
table tr td:nth-child(3) { border: 1px solid black; border-left:0; }