table表格邊框怎么設(shè)置為單線邊框？本篇文章就給大家介紹一種css設(shè)置table表格的邊框?yàn)閱尉€邊框的方法。有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對(duì)你們有所幫助。

首先我們來看看給table表格添加邊框后，它的默認(rèn)效果：

table,table  td{
	border: 1px solid #000;
}
table  td{
	padding: 10px 30px;
}

可以看出，table表格是以雙線的形式顯示的，那么如何讓table表格以單線邊框的方式現(xiàn)實(shí)中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、首先給整個(gè)table表格的外邊框加上左邊框和上邊框

table {
width: 200px;
border-top: 1px solid #999;
border-left: 1px solid #999;
}

2、在給table表格里的每個(gè)單元格添加下邊框和右邊框

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;時(shí)，就表示table表格中每個(gè)相鄰單元格的邊框間（水平和垂直方向）的距離都為0。

效果圖：

總結(jié)：以上就是本篇文章所介紹的css table表格單線邊框的一種實(shí)現(xiàn)方法，希望能對(duì)大家的學(xué)習(xí)有所幫助。