代码之家 › 专栏 › 技术社区 › Sotiris Adrian J. Moreno

表格行和边框

css-tables border row css html

Sotiris Adrian J. Moreno · 技术社区 · 14 年前

当我将PSD转换为HTML/CSS时,我陷入了一个困境。

在标题“编辑帐户详细信息”下,我有一个表来显示用户数据。

我知道了,我有下面的行规则

#editAccountDetails tr {
    border-bottom:#cdd3e0 solid 1px;
    border-top:#fff solid 1px;
    line-height:3;
}

正如您在页面中看到的,蓝色下边框与白色上边框重叠。我在所有浏览器中都得到相同的结果,所以我认为这是正常的行为,这是我无法理解的。

我想实现的是边框底部正好位于白色边框顶部之上。有什么建议吗?

如果你知道的话,P.S.还有其他能帮助我的东西。如何使边框底端不出现在最后一行,边框顶端不出现在第一行?我觉得这就像 tr + tr {... } 但我记不清了。

3 回复 | 直到 14 年前

Blowsie Mathias Bynens 14 年前

你看不到边界的原因是因为它在你的reset.css中。

table {
  border-collapse: collapse
}

将此添加到您的CSS中

#editAccountDetails table {
  border-collapse: seperate
}

您还需要删除从tr到td的边界。

#editAccountDetails td {
border-bottom:1px solid #CDD3E0;
border-top:1px solid #FFFFFF;
}

第一行的选择器是:

   #editAccountDetails tr:first-child {color:blue}

最后一行的选择器是:(最后一行在IE中不工作)

   #editAccountDetails tr:last-child {color:blue}

fcalderan 14 年前

table {
  border-collapse: collapse
}

试试这个

Vincent Robert 14 年前

只需将边界放在td上而不是tr上,一切都会很好的:-)

#editAccountDetails tr td {
    border-bottom:#cdd3e0 solid 1px;
    border-top:#fff solid 1px;
    line-height:3;
}

推荐文章

YunusoviÄ · 我无法用css更改html段落颜色

1 年前

Blake · 无法使用CSS旋转Angular 15中的字体图标

1 年前

Maarten -Monica for president · 将图像放在锚点标记内时调整网格中的图像大小

1 年前

Phil Lucks · 如何制作边界的外半径?

1 年前

roy_meir · 创建自定义下拉式元素

1 年前

Community wiki · 如何为触摸设备优化网站

1 年前

Paras Chandravanshi · 为什么<ul>没有从其父<p>元素继承?

1 年前

tpetzoldt · 如何在有光泽的情况下抑制图像的抗锯齿?

1 年前

boyenec · 反应如何将css样式应用于我从api respose获得的页面的spcifc部分

1 年前

manofconstsorrow · 点击导航项目关闭汉堡菜单

1 年前