这是否可以通过CSS实现?
我在努力
tr.classname {
border-spacing: 5em;
}
但没有用。也许我做错了什么?
这是否可以通过CSS实现?
我在努力
tr.classname {
border-spacing: 5em;
}
但没有用。也许我做错了什么?
当前回答
要创建行间距的错觉,请将背景色应用于行,然后使用白色创建厚边框,以便创建“空间”:)
tr
{
background-color: #FFD700;
border: 10px solid white;
}
其他回答
查看边界塌陷:单独属性(默认)和边界间距属性。
首先,您必须使用边框折叠来分隔它们,然后可以使用边框间距来定义列和行之间的间距。
这两个CSS财产实际上在每个浏览器上都得到了很好的支持,请参阅此处。
表{边框折叠:单独;边框间距:10px 20px;}桌子表td,表th{border:1px实心黑色;}<表><tr><td>部分文本-1</td><td>部分文本-1</td></tr><tr><td>部分文本-2</td><td>部分文本-2</td></tr><tr><td>部分文本-3</td><td>部分文本-3</td></tr></table>
在父表中,尝试设置
border-collapse: separate;
border-spacing: 5em;
再加上一份边境声明,看看这是否达到你想要的效果。不过,请注意,IE不支持“分隔边界”模式。
来自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>
为表提供间距的正确方法是使用cellpadding和cellspacing,例如。
<table cellpadding="4">
因为我在桌子后面有一个背景图像,所以用白色填充来伪装是行不通的。我选择在每行内容之间放置一个空行:
<tr class="spacer"><td></td></tr>
然后使用css为间隔行提供一定的高度和透明背景。