是否有可能以某種方式在表格行周圍設置邊框？

我試圖在鼠標進入行時改變它的顏色的特定表格行周圍添加邊框。但是，除非使用border-collapse:collapse;，否則我根本看不到邊框，但是我必須避免邊框摺疊，因爲在某些情況下，邊框可以左右兩邊看到，但不是最上面（可能是因爲我無法使用填充/邊距當使用border-collapse時）。是否有可能以某種方式在表格行周圍設置邊框？

有沒有辦法做到這一點？

<table style="border-collapse:collapse;"> 
    <tr style="border:1px solid black"> 
    <td>Cell_1</td> 
    <td>Cell_2</td> 
    </tr> 
</table>

來源

2010-08-28 wdguru

是什麼瀏覽器您使用？我可以看到邊界有沒有_border-collapse：collapse; _ – 2010-08-28 05:41:27

您可以嘗試使用outline代替。

tr:hover { 
    outline: 1px solid #999; 
}

看一看：http://jsfiddle.net/dWWkx/3/

來源

2010-08-28 05:39:56

謝謝，這似乎是我正在尋找的exacly。不過，我沒有看到谷歌瀏覽器的邊框，而Firefox 3.6按預期顯示。奇怪... – wdguru 2010-08-28 06:47:16

@wdguru嗯......大綱屬性的問題在於，它比其他任何東西都更多地用作調試工具，因爲邊框的位置在規範中沒有明確定義。有可能Webkit不支持'tr'的大綱 - IE 7以下不支持。請參閱：http://reference.sitepoint.com/css/outline – 2010-08-28 07:27:30

-1

試試這個：

<table style="">  
    <tr style="display:block;border:1px solid black">  
     <td>Cell_1</td>  
     <td>Cell_2</td>  
    </tr>  
    <tr style="display:block;border:1px solid black">  
     <td>Cell_1</td>  
     <td>Cell_2</td>  
    </tr>  
</table>

來源

2010-08-28 05:41:26

謝謝，但我已經嘗試過。 display：block的問題在於，該行不像使用display：table-row那樣進行拉伸。 – wdguru 2010-08-28 06:51:46

據我知道你不能把邊框上表中的行，但你可以在表格單元格（<td>）。使用一些具有創意邊界的右邊界和左邊界，單元格間距爲0，您應該能夠在整個行周圍出現邊框。

來源

2010-08-28 06:25:46

我有完全相同的問題，並發現此變通辦法：

<tr class="border_bottom">

CSS：

tr.border_bottom td { 
    border:1pt solid black; 
}

在這裏發現了它，並調整它：Add border-bottom to table row <tr>

來源

2016-11-03 19:55:46

是否有可能以某種方式在表格行周圍設置邊框？

回答

相關問題