Question

我的last question在我得到一个完整答案之前就已经关闭了，所以我会稍微改变一下。

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

It was suggested我只是使用白色边框使其看起来好像其他单元格没有边框。但是，如果我有渐变背景，并且不想出现白线呢？

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

Answer 1

我认为这可能是Chrome中的border-collapse属性的错误或不同解释。如果您从border-collapse: collapse移除<table>，它似乎工作正常（按预期）：http://jsfiddle.net/YZBXn/6/

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

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

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

Answer 2

根据MDN，它归结为border-collapse属性：

分离的模型是传统的HTML表格边框模型。   相邻的细胞各自具有其独特的边界。距离   它们之间由边界间距属性给出。

在折叠边框模型中，相邻的表格单元格共享边框。在   那个模型，插图的边框式值就像凹槽一样   开头表现得像山脊。

将border-collapse更改为单独并且工作正常： jsFiddle example

Answer 3

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

Answer 4

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

<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;
}

如何在Chrome中为表格单元格添加透明边框？

4 个答案: