table表格邊框怎麼設定為單線邊框？這篇文章就跟大家介紹一個css設定table表格的邊框為單線邊框的方法。有一定的參考價值，有需要的朋友可以參考一下，希望對你們有幫助。
首先我們來看看為table表格新增邊框後，它的預設效果：
table,table td{
border: 1px solid #000;
}
table td{
padding: 10px 30px;
}可以看出，table表格是以雙線的形式顯示的，那麼如何讓table表格以單線邊框的方式現實中html頁面上？下面我們就透過簡單的程式碼範例來講解一種table表格設定單線邊框的方法。
css設定單線邊框的方法介紹：
我們先要在html頁面建立table表格，程式碼如下：
<table> <tr> <td>内容</td> <td>内容</td> <td>内容</td> <td>内容</td> <td>内容</td> </tr> <tr> <td>内容</td> <td>内容</td> <td>内容</td> <td>内容</td> <td>内容</td> </tr> <tr> <td>内容</td> <td>内容</td> <td>内容</td> <td>内容</td> <td>内容</td> </tr> <tr> <td>内容</td> <td>内容</td> <td>内容</td> <td>内容</td> <td>内容</td> </tr> </table>
效果圖：
table表格建好了，我們就來看看用css怎麼為table表格加入單線邊框。
1、先給整個table表格的外邊框加上左邊框和上邊框
table {
width: 200px;
border-top: 1px solid #999;
border-left: 1px solid #999;
}2、在給table表格裡的每個單元格加入下邊框和右邊框
table td {
padding: 10px 30px;
border-bottom: 1px solid #999;
border-right: 1px solid #999;
}3、去掉單元格的間隙
table {
width: 200px;
border-top: 1px solid #999;
border-left: 1px solid #999;
border-spacing: 0;/*去掉单元格间隙*/
}說明：
border-spacing 屬性：可設定相鄰單元格的邊框間的距離（僅用於「邊框分離」模式）。
當我們設定border-spacing: 0;時，就表示table表格中每個相鄰單元格的邊框間（水平和垂直方向）的距離都為0。
效果圖：
總結：以上就是這篇文章所介紹的css table表格單線邊框的一種實作方法，希望能對大家的學習有所幫助。更多相關教學請造訪： CSS基礎影片教學， HTML影片教學，bootstrap影片教學！
以上是css怎麼設定table表格的邊框為單線邊框？ （代碼詳解）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
