CSS之表格

最新推荐文章于 2023-10-09 09:49:31 发布

web菜鸟程序猿

最新推荐文章于 2023-10-09 09:49:31 发布

阅读量400

点赞数

分类专栏： CSS 文章标签： CSS HTML

本文链接：https://blog.csdn.net/zhou0107/article/details/9145835

版权

CSS 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>CSS表格</title>
	<style type="text/css">
		/*表格边框*/
		table,th,td{
			border:1px solid blue;
		}
		/*折叠边框 border-collapse 
		设置是否把表格边框合并为单一的边框。
		separate：默认值，边框会被分开
		collapse：边框会被合并为一个单一的边框
		*/
		table{
			border-collapse:collapse;
		}
		/*分隔单元格边框的距离 border-spacing*/
		table{
			border-spacing:10px 20px;
		}
		/*表格宽度和高度 width和height属性 */
		table{
			width:100%;
			height:100px;
		}
		/*表格td文本对齐
		*水平对齐：text-align:right/left/center;
		*垂直对齐：vertical-align:bottom/top;
		*/
		td{
			/*text-align:center;*/
			vertical-align:bottom;
		}
		/*表格内边距 padding*/
		td{
			padding:10px;
		}
		/*表格颜色*/
		th{
			background-color:green;
			color:white;
		}
		/*表格布局 table-layout
		automatic：默认值，列宽度由单元格内容决定
		fixed：列宽由表格宽度和列宽度决定
		*/
		table{
			table-layout:fixed;
		}
	</style>
</head>
<body>
	<table>
		<th>eee</th>
		<tr>
			<td>ee</td>
			<td>ee</td>
		</tr>
		<tr>
			<td>ee</td>
			<td>ee</td>
		</tr>
		<tr>
			<td>ee</td>
			<td>ee</td>
		</tr>
		<tr>
			<td>ee</td>
			<td>255</td>
		</tr>
	</table>
</body>
</html>

在使用过程中table-collapse:collapse是边框合并为单一的边框，使表格效果更漂亮

web菜鸟程序猿

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS之表格

CSS表格 /*表格边框*/ table,th,td{ border:1px solid blue; } /*折叠边框 border-collapse 设置是否把表格边框合并为单一的边框。 separate：默认值，边框会被分开 collapse：边框会被合并为一个单一的边框 */ table{ border-colla
复制链接

扫一扫

专栏目录