FireFox中真正的1px表格邊框？

FireFox在border-collapse: collapse;上出現問題，即使在100％變焦時，線條粗細也會隨機更改。這是我唯一能想到的在任何地方創建一個帶有1px邊框的表格。但這很醜陋。有沒有更好的辦法？FireFox中真正的1px表格邊框？

table { 
 
    border-collapse: separate; 
 
    border-spacing: 0px; 
 
    border-right: 1px solid black; 
 
    border-bottom: 1px solid black; 
 
} 
 

 
table td { 
 
    border-left: 1px solid black; 
 
    border-top: 1px solid black; 
 
}

<table> 
 
    <tr> 
 
     <td>aaa</td> 
 
     <td>aaa</td> 
 
     <td>aaa</td> 
 
    </tr> 
 
    <tr> 
 
     <td>aaa</td> 
 
     <td>aaa</td> 
 
     <td>aaa</td> 
 
    </tr> 
 
    <tr> 
 
     <td>aaa</td> 
 
     <td>aaa</td> 
 
     <td>aaa</td> 
 
    </tr> 
 
</table>

來源

2017-02-26 Arthur

你看這個：[https://jsfiddle.net/n00du841/1/](https ：//jsfiddle.net/n00du841/1/） – ata

這與我的一個緊湊的形式相同，不是嗎？ – Arthur

好吧，我出去了，我什麼都沒有。 – ata

這個工作，雖然原因的問題時，在角動態隱藏表列。

table { 
    font-size: inherit; 
    border-collapse: separate; 
    border-spacing: 0; 
} 

td, th { 
    padding-left: 2px; 
    padding-right: 2px; 
    vertical-align: top; 
    min-width: 10px; 
    empty-cells: show; 
} 

table.border td, table.border th { 
    border-left: solid 1px #808080; 
    border-top: solid 1px #808080; 
    border-right: none; 
    border-bottom: none; 
} 

table.border tr th:last-child, table.border tr td:last-child { 
    border-right: solid 1px #808080 !important; 
} 

table.border tr:last-child th, table.border tr:last-child td { 
    border-bottom: solid 1px #808080 !important; 
}

來源

2017-04-11 06:16:29 Arthur

試試這個：https://jsfiddle.net/n00du841/

<table> 
    <tr> 
    <td>aaa</td> 
    <td>aaa</td> 
    <td>aaa</td> 
    </tr> 
    <tr> 
    <td>aaa</td> 
    <td>aaa</td> 
    <td>aaa</td> 
    </tr> 
    <tr> 
    <td>aaa</td> 
    <td>aaa</td> 
    <td>aaa</td> 
    </tr> 
</table>

CSS

table { 
    border-collapse: separate; 
    border-spacing: 0px; 
    border: 1px solid black; 
} 

table td { 
    border: 1px solid black; 
}

來源

2017-02-26 08:33:20 ata

對不起，這是Chrome和FF中的2px邊框。 – Arthur

@Arthur是的，我沒有注意到你問了1px。醜陋你的意思是表或CSS代碼？因爲它似乎有伎倆。 – ata

我的意思是CSS。我也使用基於jquery的頭部凍結庫，它在1px邊框上效果更好。如果邊框更粗，它的寬度計算在Firefox中稍微偏離。 – Arthur

添加邊框類HTML表格

<table class="border">

以下CSS應該工作

table.border { 
    border-left: solid 1px #eee; 
    border-top: solid 1px #eee; 
} 

table.border td, table.border th { 
    border-right: solid 1px #eee; 
    border-bottom: solid 1px #eee; 
}

來源

2017-08-17 18:29:30

FireFox中真正的1px表格邊框？

回答

相關問題