首頁  >  文章  >  web前端  >  css怎麼設定table表格的邊框為單線邊框? (代碼詳解)

css怎麼設定table表格的邊框為單線邊框? (代碼詳解)

青灯夜游
青灯夜游原創
2018-10-29 11:27:5130737瀏覽

table表格邊框怎麼設定為單線邊框?這篇文章就跟大家介紹一個css設定table表格的邊框為單線邊框的方法。有一定的參考價值,有需要的朋友可以參考一下,希望對你們有幫助。

首先我們來看看為table表格新增邊框後,它的預設效果:

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

css怎麼設定table表格的邊框為單線邊框? (代碼詳解)

可以看出,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>

效果圖:

css怎麼設定table表格的邊框為單線邊框? (代碼詳解)

table表格建好了,我們就來看看用css怎麼為table表格加入單線邊框。

1、先給整個table表格的外邊框加上左邊框和上邊框

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

css怎麼設定table表格的邊框為單線邊框? (代碼詳解)

2、在給table表格裡的每個單元格加入下邊框和右邊框

table td {
	padding: 10px 30px;
	border-bottom: 1px solid #999;
	border-right: 1px solid #999;
}

css怎麼設定table表格的邊框為單線邊框? (代碼詳解)

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 table表格單線邊框的一種實作方法,希望能對大家的學習有所幫助。更多相關教學請造訪: CSS基礎影片教學 HTML影片教學bootstrap影片教學

以上是css怎麼設定table表格的邊框為單線邊框? (代碼詳解)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn