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

时间:2013-04-26 20:57:12

标签: html css google-chrome

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

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

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

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

4 个答案:

答案 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;">&nbsp;</div></td>

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

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