[點晴永久免費OA]CSS怎么設(shè)置table表格的邊框為單線邊框?
當(dāng)前位置:點晴教程→點晴OA辦公管理信息系統(tǒng)
→『 經(jīng)驗分享&問題答疑 』
table表格邊框怎么設(shè)置為單線邊框?本篇文章就給大家介紹一種css設(shè)置table表格的邊框為單線邊框的方法。有一定的參考價值,有需要的朋友可以參考一下,希望對你們有所幫助。
首先我們來看看給table表格添加邊框后,它的默認效果: table,table td{
border: 1px solid #000;
}
table td{
padding: 10px 30px;
}
可以看出,table表格是以雙線的形式顯示的,那么如何讓table表格以單線邊框的方式現(xiàn)實中html頁面上?下面我們就通過簡單的代碼示例來講解一種table表格設(shè)置單線邊框的方法。 css設(shè)置單線邊框的方法介紹: 我們先要在html頁面建立table表格,代碼如下: <table> <tr> <td>內(nèi)容</td> <td>內(nèi)容</td> <td>內(nèi)容</td> <td>內(nèi)容</td> <td>內(nèi)容</td> </tr> <tr> <td>內(nèi)容</td> <td>內(nèi)容</td> <td>內(nèi)容</td> <td>內(nèi)容</td> <td>內(nèi)容</td> </tr> <tr> <td>內(nèi)容</td> <td>內(nèi)容</td> <td>內(nèi)容</td> <td>內(nèi)容</td> <td>內(nèi)容</td> </tr> <tr> <td>內(nèi)容</td> <td>內(nèi)容</td> <td>內(nèi)容</td> <td>內(nèi)容</td> <td>內(nèi)容</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 屬性:可以設(shè)置相鄰單元格的邊框間的距離(僅用于“邊框分離”模式)。 當(dāng)我們設(shè)置border-spacing: 0;時,就表示table表格中每個相鄰單元格的邊框間(水平和垂直方向)的距離都為0。 效果圖:
總結(jié):以上就是本篇文章所介紹的css table表格單線邊框的一種實現(xiàn)方法,希望能對大家的學(xué)習(xí)有所幫助。 該文章在 2020/5/22 17:07:31 編輯過 |
關(guān)鍵字查詢
相關(guān)文章
正在查詢... |