CSS表格样式详解-优快云博客

本文链接：https://blog.youkuaiyun.com/code_dream_wq/article/details/77743155

-通用样式:width,height,border,background
-文本格式化 vertical-align ，text-align
-表格样式：border-collapse：collapse、separate
border-spacing：value
必须建立border-collapse为separate的提前下
caption-side：定义表格标题的位置
table-layout：表格布局固定或不固定

不固定：默认，较为灵活

eg:

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			
			table {
				width: 500px;
				height: 400px;
				border: 1px solid black;
				font-size: 16px;
				font-family: "微软雅黑";
				border-collapse: collapse;
				/*
				 border-collapse:让table的双线边框合并成单线
				 collapse	如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性
					separate	默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性
				 * */
				border-collapse: separate;
				border-spacing: 10px 10px;
				/*
				 设置相邻单元格边框间的距离
				 仅限于分隔单元格边框，即border-collapse属性为separate值的情况下，也称为边框分离模式
				 取值长度值，可以一个值也可以是两个值，连个值：第一个是水平间距，第二个是垂直距离
				 * */
				caption-side: bottom;
				/*设置caption 标题的位置*/
				table-layout: fixed;
				/*
				 table-layout 使用时需要定单元格的宽width：33%，fixed单元格固定，不会自适应被撑开，效率比较高，但要对
				 溢出做处理  ，可以用overflow: hidden;   text-overflow: ellipsis;
				 * */ 
			}
			td {
				border: 1px solid black;
				text-align: center;
				width: 33%;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		</style>
	</head>
	<body>
		
		<table >
			<caption> 表格标题</caption>
			<tr >
				<td title="1111111111111111111111111111111111111"> 1111111111111111111111111111111111111111111111111111111111</td>
					<td>第一行</td>
			</tr>
			<tr>
				<td>第二行</td>
				
					<td>第二行</td>
			</tr>
				<tr>
				<td>第二行</td>
				
					<td>第二行</td>
			</tr>
				<tr>
				<td>第二行</td>
				
					<td>第二行</td>
			</tr>
		</table>
	</body>
</html>

css-7.表格