如何在Chrome中爲表格單元添加透明邊框？

我的last question在我得到完整答案之前已經關閉，所以我會稍微區分一下這一點。如何在Chrome中爲表格單元添加透明邊框？

在Chrome中，看起來如果您在一個表格單元格上設置邊框底部，則必須在同一行中的所有單元格上設置邊框底部，否則Chrome不知道如何處理未考慮的內容空間。

It was suggested我簡單地使用白色邊框使其看起來好像其他單元格沒有邊框。但是如果我有漸變背景，並且不希望出現白線，該怎麼辦？

看來1px solid transparent沒有任何影響。 rgba也不起作用。

2013-04-26 mpen

根據MDN這一切都歸結到border-collapse屬性：

的分離模式是傳統的HTML表格邊框模型。相鄰的單元格各有不同的邊界。它們之間的距離爲，由border-spacing屬性給出。

在摺疊的邊框模型中，相鄰的表格單元共享邊框。在那個模型中，插圖的邊框樣式的行爲像凹槽一樣，並且起始像脊一樣行爲。

變化border-collapse分離並能正常工作：jsFiddle example

來源

2013-04-26 21:04:53 j08691

啊！這就是CBroe所談論的。我仍然不能100％確定它爲什麼會這樣做;大概這個邊界與下面的單元共享，沒有定義邊界。所以...它來自哪裏？噢.....哦，從不知情。它的確如此。因爲colspan！這是有道理的。 – mpen 2013-04-26 21:19:00

我相信這是對Chrome中border-collapse屬性的錯誤或不同解釋。它似乎工作正常（如預期），如果您從<table>刪除border-collapse: collapse：http://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-26 21:02:35

問題是1px solid transparent是透明的「邊界」下面是從以前的兄弟<td>捉襟見肘。更好的方法是不使用表格。

來源

2013-04-26 21:02:45 Mooseman

我不知道如何讓它對齊沒有表格。下面的文字需要與下劃線對齊。 – mpen 2013-04-26 21:14:30

我能得到它，而不訴諸透明的工作。

<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-26 21:07:23 mankowitz

如何在Chrome中爲表格單元添加透明邊框？

回答

相關問題