利用Css3制作圆角表格

最新推荐文章于 2023-07-06 16:36:02 发布

weixin_30617695

最新推荐文章于 2023-07-06 16:36:02 发布

阅读量240

点赞数 1

原文链接：http://www.cnblogs.com/wozien/p/6723220.html

版权

重温和记录下表格的制作流程。主要利用css3中的border-radius属性设置圆角。还有制作表格的一些顺序和注意的地方，逐渐总结。

完成后的表格如下：

先写html表格代码

分析表格的数据，可以先在纸上画下大概布局。因为合并的单元格要用colspan和rowspan进行设置。htm代码如下：

<body>
	<table class="custom_tb">
		<thead>
			<tr>
				<th>#</th>
				<th>Hostname</th>
				<th>Uid</th>
				<th>status</th>
			</tr>
		</thead>
		<tr>
			<td>1</td>
			<td>server1</td>
			<td>12323342</td>
			<td>connect</td>
		</tr>
		<tr>
			<td>2</td>
			<td>server2</td>
			<td>63382913</td>
			<td>disconnect</td>
		</tr>
	</table>
</body>

定义表格样式

写表格样式的顺序可以如下(当然自己习惯最重要):

(1)设置table的属性，比如字体的大小和风格，如下：

table{
			/*border-collapse: collapse;*/
			border-spacing:0;
			font-family: Arial, Helvetica, sans-serif;
			font-size: 14px;
			color: #444;
		}

(2)设置的单元格的属性，包括边框，padding，背景颜色等。最后去掉和table边框重叠的border。

		.custom_tb tr:hover{
			background-color: #fbf8e9;
			transition: all 0.1s ease-in-out;
		}
		.custom_tb th,.custom_tb td{
			border-left: 1px solid #ccc;
			border-top: 1px solid #ccc;
			padding: 10px;
			text-align: left;
		}
		.custom_tb th{
			background-color: #dce9f9;
			border-top:none;
		}
		.custom_tb td:first-child,.custom_tb th:first-child{
			border-left: none;
		}
		.custom_tb th:first-child{
			border-radius: 6px 0 0 0;
		}
		.custom_tb th:last-child{
			border-radius: 0 6px 0 0;
		}
		.custom_tb tr:last-child td:first-child{
			border-radius: 0 0 0 6px;
		}
		.custom_tb tr:last-child td:last-child{
			border-radius: 0 0 6px 0;
		}

完成后的效果如下：

(3)设置table的border属性，包裹整个表格。

.custom_tb{
			width: 80%;
			margin: 50px auto;
			border:1px solid #ccc;
			border-radius: 6px;
			box-shadow: 0 1px 1px #ccc;
		}

注意：在上面的代码理解过程中有几个需要注意的地方。border-collapse不能和border-radius一起用，不然后者会失效。还有伪类:first-child是指每个父元素下的第一个匹配元素。

转载于:https://www.cnblogs.com/wozien/p/6723220.html

weixin_30617695

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
利用Css3制作圆角表格

重温和记录下表格的制作流程。主要利用css3中的border-radius属性设置圆角。还有制作表格的一些顺序和注意的地方，逐渐总结。完成后的表格如下：先写html表格代码分析表格的数据，可以先在纸上画下大概布局。因为合并的单元格要用colspan和rowspan进行设置。htm代码如下：<body> <table class="custom_tb"&gt...
复制链接

扫一扫