1

在我得到完整答案之前，我的最后一个问题已经结束，所以我会以不同的方式分阶段解决这个问题。

在 Chrome 中，如果您在一个表格单元格上设置边框底部，则必须在同一行中的所有单元格上设置边框底部，否则 Chrome 不知道如何处理未计入的空间。

有人建议我简单地使用白色边框使其看起来好像其他单元格没有边框。但是，如果我有渐变背景，并且不想出现白线怎么办？

似乎1px solid transparent没有任何影响。rgba也不行。

4

4 回答 4

1

我相信这要么是一个错误，要么是对border-collapseChrome 中属性的不同解释。border-collapse: collapse如果您从以下位置删除，它似乎工作正常（按预期） ：http <table>: //jsfiddle.net/YZBXn/6/

另一种方法是使用包含在具有边框的表格单元格中的另一个元素。

<td><div style="border-bottom:1px solid black;width:1.5in;">&nbsp;</div></td>

http://jsfiddle.net/YZBXn/7/

于 2013-04-26T21:02:35.173 回答
1

根据MDN，这一切都归结为border-collapse属性：

分离模型是传统的 HTML 表格边框模型。相邻的单元格都有自己独特的边界。它们之间的距离由border-spacing 属性给出。

在折叠边框模型中，相邻的表格单元格共享边框。在该模型中，边框样式的 inset 值表现得像凹槽，而 outset 表现得像脊。

更改border-collapse为单独的，它工作正常：jsFiddle 示例

于 2013-04-26T21:04:53.587 回答
0

问题是1px solid transparent它对从前一个兄弟延伸的下面的“边框”是透明的<td>。更好的方法是不使用表格。

于 2013-04-26T21:02:45.917 回答
0

我能够在不诉诸透明的情况下让它工作。

<table>
    <tr><td id=cell1>bleah</td><td id=cell2>bleah</td></tr>
    <tr><td id=cell3>blah</td><td id=cell4>blah</td></tr>
</table>

#cell1 {
    border-bottom: 1px solid black;
}
#cell4 {
    border-bottom: 9px dotted red;
}
于 2013-04-26T21:07:23.837 回答