想必大家在做網頁表格的時候一定遇到過這種情況吧
表格出現了“雙線”，但是我們需要一個“單線”的表格
比較常用的解決方案
解決方案1：
在表格的樣式中添加border-collapse: collapse;以設定邊框合并（如果border-collapse的屬性值為collapse，則會忽略 border-spacing 和 empty-cells 屬性），效果如下：
中間的那一條線特別粗，強迫癥表示巨不舒服
解決方案2：
在表格樣式中添加border-spacing: 0;（由于HTML5已經放棄cellspacing這個屬性，所以用border-spacing: 0;這個樣式來代替）以設定相鄰單元格邊框間的距離為0，效果如下：
表格的底邊還是“雙線”，沒有達到去除“雙線”的目的
我的解決方案
以上兩種方法都沒有很好地解決“雙線”這個問題，那么究竟什么方法可以完美地把“雙線”這個問題解決呢？
眾所周知，在css中，萬物皆為盒子，我們可以把表格看成一個大盒子，單元格看成大盒子里的幾個小盒子
首先設定表格（大盒子）為黑色（為了區分，我暫時把字改成白色）：
table {
background: #000;
color: #fff;
}
接著，我們把單元格的背景改成白色（再把字改回黑色）：
td,th {
background: #fff;
}
最后我們可以按照我們的需求對表格進行改變
最終的HTML&CSS代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格</title>
<link type="text/css" rel="stylesheet" href="https://www.cnblogs.com/Lance-Blog/archive/2022/04/28/css檔案路徑"/>
</head>
<body>
<table >
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td align="center">January</td>
<td align="center">$100</td>
</tr>
</table>
</body>
</html>table {
background: #000;
}
td,th {
background: #fff;
}
以上就是《如何完美地去除表格的“雙線”》的所有內容，感謝觀看
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/467073.html
標籤：其他
上一篇：javascript生成一棵樹
下一篇：JS初識