在我的HTML文档中,我有一个包含两列和多行的表。如何使用CSS增加第一列和第二列之间的空间?我尝试应用“ margin-right:10px;” 到左侧的每个单元格,但没有效果。
Answers:
将此应用到您的第一个<td>
:
padding-right:10px;
HTML示例:
<table>
<tr>
<td style="padding-right:10px">data</td>
<td>more data</td>
</tr>
</table>
border-collapse: separate
有错字),应该是(separate
上面的拼写有错字)
border-spacing: 5px;
border-spacing
还增加了行之间的空间。不幸的是,垂直和水平间距没有单独的属性。
border-spacing
需要两个参数-一个用于水平,一个用于垂直。
一个警告:虽然padding-right
可以解决您特定的(视觉)问题,但这不是在表格单元格之间增加间距的正确方法。什么padding-right
确实的细胞类似于它做什么其他大多数元素:它增加了空间中的单元格。如果单元格没有边框或背景色或其他可以使游戏消失的颜色,则可以模拟设置单元格之间的空间的效果,但不能模仿。
有人指出,表单元格的边距规范被忽略:
内部表格元素会生成带有内容和边框的矩形框。单元格也有填充。内部表元素没有空白。
那么“正确”的方式是什么?如果要替换cellspacing
表的属性,则border-spacing
(border-collapse
禁用)为替换。但是,如果需要每个单元的“边距”,我不确定如何使用CSS来正确实现。我唯一想到的技巧是使用padding
上述方法,避免对单元格进行任何样式设置(背景颜色,边框等),而是使用单元格内部的容器DIV来实现这种样式。
我不是CSS专家,因此在上面我可能是错的(很高兴知道!我也希望使用表格单元格边距CSS解决方案)。
干杯!
如果您不能使用填充(例如,在td中有边框),请尝试以下操作
table {
border-collapse: separate;
border-spacing: 2px;
}
我意识到这是迟来的,但是为了记录起见,您还可以使用CSS选择器来做到这一点(消除了对内联样式的需求。)此CSS将填充应用于每行的第一列:
table > tr > td:first-child { padding-right:10px }
这就是您的HTML,没有CSS !:
<table><tr><td>data</td><td>more data</td></tr></table>
这样可以提供更优雅的标记,尤其是在需要使用CSS进行许多特定格式设置的情况下。
您可以简单地做到这一点:
<html>
<table>
<tr>
<td>one</td>
<td width="10px"></td>
<td>two</td>
</tr>
</table>
</html>
不需要CSS :)这10px是您的空间。
使用border-collapse:不适用于我,因为我只需要在表格单元格之间留一个边距,而不是在桌子的两边。
我想出了下一个解决方案:
- 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>
这对于解决工作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>
我发现解决此问题的最佳方法是反复试验和阅读我之前写的东西:
如您所见,我正在进行一些非常棘手的事情……但是使它变得更好的主要推动力是:
父元素(UL):边界折叠:单独;边框间距:.25em;左边距:-.25em;
儿童元素(LI):显示:表格单元格;垂直对齐:中间;
的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; }
<!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>
使用填充不是正确的方法,它可能会改变外观,但这不是您想要的。这样可以解决您的问题。
您可以同时使用它们:
padding-right:10px;
padding-right:10%;
但是最好与%一起使用。
%
如果无法使用填充,则另一种解决方法是添加额外的列并使用设置宽度<colgroup>
。当我试图给单元格边框本身留出一定的余量时,以上的填充解决方案都对我不起作用,这最终解决了问题:
<table>
<colgroup>
<col>
<col width="20px">
<col>
</colgroup>
<tr>
<td>data</td>
<td></td>
<td>more data</td>
</tr>
</table>
使用:nth-child设置表格单元格的边框样式,使第二列和第三列看起来像是一列。
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; }