【表格css】如何设置表格行的样式

楠竹1001 2017-01-15 01:51:40

如图，想把表格的行，按照如下效果展示，请问，该怎么设置呢，本人小白，还望指点！
现在存在的主要问题就是如何解决行与行之间的这个空隙问题？考虑到<thead>部分的背景与下边的行的背景不同，用背景图片是不是太过麻烦，有没有更好的方式，诚意求教，还望指点一二！

...全文

537 5 打赏收藏转发到动态举报

写回复

用AI写文章

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

楠竹1001 2017-01-16

打赏
举报

受教了，谢谢

天际的海浪 2017-01-15

打赏
举报

用css就是


#mytab td:nth-child(1) { /*第一列*/
	width: 100px;
}
#mytab td:nth-child(2) { /*第二列*/
	width: 200px;
}

天际的海浪 2017-01-15

打赏
举报

设置每列的宽度可以用<colgroup width="100"></colgroup>


<table id="mytab">.
	<colgroup width="100"></colgroup>
	<colgroup width=""></colgroup>
	<colgroup width=""></colgroup>
	<colgroup width=""></colgroup>
	<thead>
		<tr>
			<td>项目名一</td>
			<td>项目名二</td>
			<td>项目名三</td>
			<td>项目名四</td>
		</tr>
	</thead>

楠竹1001 2017-01-15

打赏
举报

我擦，原来是这个，

，厉害！谢谢指点！还想请教下，设置每列的宽度怎么设置呢？<col>?还是其他的方法呢，求解！比如姓名这一行我就想让他固定大小，否则有的长，有的短，显示效果会有变化

天际的海浪 2017-01-15

打赏
举报


<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<title> 页面名称 </title>
<style type="text/css">
body {
	background-color: #0ff;
}
#mytab {
	width: 100%;
	border-spacing: 0px 5px;
}
#mytab td {
	text-align: center;
	font-size: 20px;
	height: 30px;
	background-color: #fff;
	color: #099;
}
#mytab td:first-child {
	border-radius: 10px 0px 0px 10px;
}
#mytab td:last-child {
	border-radius: 0px 10px 10px 0px;
}
#mytab thead td {
	background-color: #099;
	color: #fff;
}

</style>
</head>
<body>

<table id="mytab">
	<thead>
		<tr>
			<td>项目名一</td>
			<td>项目名二</td>
			<td>项目名三</td>
			<td>项目名四</td>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>内容一</td>
			<td>内容二</td>
			<td>内容三</td>
			<td>内容四</td>
		</tr>
		<tr>
			<td>内容一</td>
			<td>内容二</td>
			<td>内容三</td>
			<td>内容四</td>
		</tr>
		<tr>
			<td>内容一</td>
			<td>内容二</td>
			<td>内容三</td>
			<td>内容四</td>
		</tr>
		<tr>
			<td>内容一</td>
			<td>内容二</td>
			<td>内容三</td>
			<td>内容四</td>
		</tr>
	</tbody>
</table>

</body>
</html>