记一次使用css 实现斜线表头

最新推荐文章于 2024-12-20 11:28:24 发布

原创最新推荐文章于 2024-12-20 11:28:24 发布 · 1.2k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#css #斜线表头

css 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了如何使用HTML和CSS实现斜线表头的效果，包括代码示例和样式调整技巧，适用于网页表格设计。

1.斜线表头内容在表格中

相关代码：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>斜线表头</title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}
			table {
				border-collapse: collapse;
				margin: 0 auto;
				margin-top: 30px;
				margin-bottom: 50px;
			}
			
			th {
				color: grey;
				border: .5px solid gray;
				width: 100px;
				height: 60px;
				/*禁止内容换行*/
				white-space: nowrap;
			}
			.tableHead{
				/*斜线表头的宽*/
				min-width: 152px;				
				/*超出范围隐藏*/
				position: relative;
				overflow: hidden;				 
			}
			.tableHead b {
				font-size: 15px;
				text-align: left;
				white-space: nowrap;
				/*固定文字位置*/
				position: relative;
		    top: 12px;
		    left: -5px;
				
			}
			
			.tableHead .em {
				font-size: 15px;
				text-align: right;				 
				white-space: nowrap;
				/*固定文字位置*/
				position: relative;
				left: 5px;
    		top: -15px;
			}
			
			/*斜线样式 宽度，位置 旋转角度*/
			.tableHead .slopingside {
				height: 0px;				
		    border-bottom: 1px solid gray;
		    width: 306px;		    
		    margin-top: -2px;
		    margin-left: -56px;
		    position: absolute;
		    transform: rotate(-158deg);
				-o-transform: rotate(-158deg);
				-moz-transform: rotate(-158deg));
				-webkit-transform: rotate(-158deg);				  
			}
			.myHead{
				overflow: hidden;
				width: 185px;
				position: relative;
			}
			.myHead::before{
				content: '';
		    position: absolute;
		    width: 1px;
		    height: 210px;
		    top: 0;
		    left: 0;
		    background-color: #000;
		    opacity: 0.5;
		    display: block;
		    transform: rotate(-72deg);
		    transform-origin: top;
		    overflow: hidden;
			}
			.myHead span:first-child{
				padding-left: 100px;
			}
			.myHead span:last-child{
				padding-right: 100px;
			}
		</style>
	</head>

	<body>
		<table>			 
			<tr>			
				<!--斜线在th中-->
				<th class="tableHead">
					<b>title1</b>
					<div class="slopingside"></div>
					<span class="em">title2</span>
				</th>
				<!--伪类实现斜线-->
				<th class="myHead">
					<span>item1</span>
					<br>
					<span>item2</span>
				</th>
				<th>item1</th>
				<th>item2</th>
				<th>item3</th>
				<th>item4</th>
			</tr> 
		</table> 
	</body>

效果截图：