这是否可以通过CSS实现?

我在努力

tr.classname {
  border-spacing: 5em;
}

但没有用。也许我做错了什么?


当前回答

我意识到这是对一个旧线程的回答,可能不是所要求的解决方案,但尽管所有建议的解决方案都没有达到我所需要的效果,但这个解决方案对我有效。

我有两个表格单元格,一个带有背景色,另一个带有边框色。上述解决方案删除了边界,因此右侧的单元格看起来像漂浮在半空中。成功的解决方案是用div和相应的类替换table、tr和td:table将是div id=“table_replacer”,tr将是div class=“tr_replaceer”,td将是div class=“td_replacer“(显然也将结束标记更改为div)

为了解决我的问题,css是:

#table_replacer{display:table;}
.tr_replacer {border: 1px solid #123456;margin-bottom: 5px;}/*DO NOT USE display:table-row! It will destroy the border and the margin*/
.td_replacer{display:table-cell;}

希望这对某人有所帮助。

其他回答

您需要在td元素上使用填充。像这样的东西应该会奏效。当然,您可以使用顶部填充而不是底部填充获得相同的结果。

在下面的CSS代码中,大于号表示填充仅应用于td元素,这些元素是带有spaceUnder类的tr元素的直接子元素。这将使使用嵌套表成为可能。(示例代码中的单元格C和D)我不太确定浏览器是否支持直接子选择器(想想IE 6),但它不应该破坏任何现代浏览器中的代码。

/*对类spaceUnder的tr元素的直接子级td元素应用填充*/tr.spaceUnder>td{衬垫底部:1毫米;}<表><tbody><tr><td>一个</td><td>B级</td></tr><tr class=“spaceUnder”><td>C类</td><td>D)</td></tr><tr><td>电子</td><td>F级</td></tr></tbody></table>

这应该有点像这样:

+---+---+
| A | B |
+---+---+
| C | D |
|   |   |
+---+---+
| E | F |
+---+---+

不能更改表格单元格的边距。但你可以更换衬垫。更改TD的填充,这将使单元格变大,并通过增加的填充将文本推离侧面。然而,如果你有边界线,它仍然不是你想要的。

您是否尝试过:

tr.classname { margin-bottom:5em; }

或者,也可以调整每个td:

td.classname { margin-bottom:5em; }

or

 td.classname { padding-bottom:5em; }

来自Mozilla开发者网络:

border-spacing CSS属性指定相邻单元格边界之间的距离(仅适用于分隔边界模型)。这相当于表示HTML中的cellspacing属性,但可以使用可选的第二个值来设置不同的水平和垂直间距。

这最后一部分经常受到监督。例子:

.your-table {
    border-collapse: separate; /* allow spacing between cell borders */
    border-spacing: 0 5px; /* NOTE: syntax is <horizontal value> <vertical value> */

更新

我现在明白了OP希望特定的、单独的行具有增加的间距。我添加了一个带有tbody元素的设置,它可以在不破坏语义的情况下实现这一点。然而,我不确定是否所有浏览器都支持它。我是用Chrome制作的。

下面的例子是为了展示如何让它看起来像是一个单独的表格,充满了css的甜蜜。也给了第一排更多的空间与车身设置。请随意使用!

支持通知:IE8+、Chrome、Firefox、Safari、Opera 4+

.间距表{字体系列:'Helvetica','Arial',无衬线;字体大小:15px;边界塌陷:分离;表格布局:固定;宽度:80%;边框间距:0 5px;/*这是最终的解决方案*/}.间距表th{文本对齐:左侧;填充:5px 15px;}.间距表td{边框宽度:3px 0;宽度:50%;边框颜色:深红色;边框样式:实心;背景色:红色;颜色:白色;填充:5px 15px;}.间距表td:第一个子项{边框左侧宽度:3px;边界半径:5px 0 0 5px;}.space table td:最后一个子级{边框右侧宽度:3px;边界半径:0 5px 5px 0;}.间距表thead{显示:表格;表格布局:固定;宽度:100%;}.间距表tbody{显示:表格;表格布局:固定;宽度:100%;边框间距:0 10px;}<table class=“spacing table”><thead><tr>主唱</th><th>波段</th></tr></thead><tbody><tr><td>博诺牌手表</td><td>U2型</td></tr></tbody><tbody><tr><td>克里斯·马丁</td><td>酷玩</td></tr><tr><td>米克·贾格尔</td><td>滚石乐队</td></tr><tr><td>约翰·列侬</td><td>披头士乐队</td></tr></tbody></table>

您可以用<div/>元素填充<td/>元素,并对您喜欢的div应用任何边距。对于行之间的可视空间,可以在<tr/>元素上使用重复的背景图像。(这是我今天刚刚使用的解决方案,它似乎在IE6和FireFox 3中都有效,尽管我没有进一步测试它。)

此外,如果您不愿意修改服务器代码以将<div/>s放在<td/>s中,那么可以使用jQuery(或类似的东西)将<td/〕内容动态地包装在<div/〕中,使您能够根据需要应用CSS。