單元格內的邊框

如何將CSS設置爲在td內顯示邊框，而不是懸停在外部。通常，當我將鼠標懸停在單元格上時，我將鼠標懸停式設置爲邊框，表格行按懸停邊框的寬度移動。我希望它顯示在裏面，因此不會移動。（例如電池是10px的寬度和我添加2px的邊框我還是希望它是10像素的寬度，但與2px的邊框在每邊，因此6個像素左右的同意。）單元格內的邊框

的jsfiddle：http://jsfiddle.net/reg4f/

這裏是我的HTML：

<table> 
<tr> 
<td> 
    <a>po</a> 
</td> 
<td> 
    <a>út</a> 
</td> 
</tr> 
<table>

和CSS

table { 
    width: 250px; 
    height: 250px; 
    table-layout: fixed; 
    border: solid black 1px; 
    border-collapse: collapse; 
} 
table td, table tr { 
    text-align: right; 
    vertical-align:middle; 
} 
td:hover{ 
    background-color: #E5F3FB; 
    border: solid 4px #70C0E7; 
    border-style: inset; 
} 
td a { 
    display:block;width:100%;height:100%;margin:0 
}

來源

2014-02-17 user3319891

你可以嘗試白色或透明邊框添加到電池中，當它不是：懸停和覆蓋此白色邊框當它是：懸停。所以你沒有感動。

td { 
border: solid 4px rgba(0,0,0,0); 
}

下面是一個例子： http://jsfiddle.net/G6w9P/

來源

2014-02-17 16:43:38 JaGo

我試過，但透明邊框覆蓋懸停的一個。實際上只顯示底部和右側，左側和頂部由透明邊框隱藏。無論如何它不是這樣移動。 – user3319891

真的嗎？在給定的jsFiddle示例中，我沒有隱藏的左上邊框。這只是另一種顏色，因爲懸停邊框樣式設置爲「插入」，這意味着瀏覽器將更改左側和上側邊框的顏色以創建3D感覺。試試這個，也許這就是你想要的？ http://jsfiddle.net/qw6vT/ – JaGo

好吧。我不得不刪除邊框崩潰，因爲它摺疊了表格邊框和TD邊框，從而移動了行。 – user3319891

我建議添加填充到未懸停相同的寬度上懸停邊界。懸停時刪除填充並添加邊框。

喜歡的東西：

td{ 
    padding:2,2,2,2; 
    border:none; 
} 

td:hover{ 
    padding:0,0,0,0; 
    border:solid 2px red; 
}

乾杯 -L

來源

2014-07-15 18:42:14 user1538952

單元格內的邊框

回答

相關問題