table 設定合併邊框

愛吃排骨發表於2018-07-27

先來看看原始表格

<table  border="1 	">
			<thead>
				<tr >
					<th>網站</th>
					<th>資源</th>
					<th>url</th>
					<th>排名</th>
				</tr>
				<tbody>
					<tr >
					<td>淘寶網</td>
					<td>大</td>
					<td>www.taobao.com</td>
					<td>25</td>
					</tr>
					<tr >
					<td rowspan="2">京東</td>
					<td>大</td>
					<td>www.jingdong.com</td>
					<td>25</td>
					
					</tr>
					<tr >
					<td>大</td>
					<td>www.jingdong.com</td>
					<td>25</td>
					
					</tr>
					<tr >
						<td colspan="4" style="text-align: right;">小小小</td>
					</tr>
				</tbody>
			</thead>
		</table>

效果圖

其中 rowspan 屬性規定單元格可橫跨的行數。設定為rowspan:2 表示佔2個單元格.colspan 屬性規定單元格可橫跨的列數,設定為colospan:4 就可以佔用滿列。大家看現在的table的邊框和內容是有邊距的，如果想消除邊距，並且使border變細，可以使用

border-collapse:collapse屬性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			
			table{
		    border-collapse:collapse
			
			}
			
		</style>
	</head>
	<body>
		<table  border="1 	">
			<thead>
				<tr >
					<th>網站</th>
					<th>資源</th>
					<th>url</th>
					<th>排名</th>
				</tr>
				<tbody>
					<tr >
					<td>淘寶網</td>
					<td>大</td>
					<td>www.taobao.com</td>
					<td>25</td>
					</tr>
					<tr >
					<td rowspan="2">京東</td>
					<td>大</td>
					<td>www.jingdong.com</td>
					<td>25</td>
					
					</tr>
					<tr >
					<td>大</td>
					<td>www.jingdong.com</td>
					<td>25</td>
					
					</tr>
					<tr >
						<td colspan="4" style="text-align: right;">小小小</td>
					</tr>
				</tbody>
			</thead>
		</table>
	</body>
</html>

這樣就好了

相關文章