我的last question在我得到一个完整答案之前就已经关闭了,所以我会稍微改变一下。
在Chrome中,如果您在一个表格单元格上设置边框底部,则必须在同一行的所有单元格上设置边框底部,否则Chrome无法知道如何处理未计入空间
It was suggested我只是使用白色边框使其看起来好像其他单元格没有边框。但是,如果我有渐变背景,并且不想出现白线呢?
似乎1px solid transparent
没有任何影响。 rgba
也不起作用。
答案 0 :(得分:1)
我认为这可能是Chrome中的border-collapse
属性的错误或不同解释。如果您从border-collapse: collapse
移除<table>
,它似乎工作正常(按预期):http://jsfiddle.net/YZBXn/6/
另一种方法是使用包含在具有边框的表格单元格中的另一个元素。
<td><div style="border-bottom:1px solid black;width:1.5in;"> </div></td>
答案 1 :(得分:1)
根据MDN,它归结为border-collapse
属性:
分离的模型是传统的HTML表格边框模型。 相邻的细胞各自具有其独特的边界。距离 它们之间由边界间距属性给出。
在折叠边框模型中,相邻的表格单元格共享边框。在 那个模型,插图的边框式值就像凹槽一样 开头表现得像山脊。
将border-collapse
更改为单独并且工作正常: jsFiddle example
答案 2 :(得分:0)
问题在于1px solid transparent
对于从前一个兄弟<td>
拉伸的“边框”是透明的。更好的方法是不使用表格。
答案 3 :(得分: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;
}