<!DOCTYPE html>
<html>
<head>
<title>表格斜线</title>
<style>
html {
height: 100%;
}
body {
height: calc(100% - 16px);
}
.wrap {
position: absolute;
top: 75px;
bottom: 20px;
left: 50%;
margin-left: -425px;
width: 870px;
}
.tab-body {
clear: both;
width: 100%;
height: 45%;
}
.tab-body h1 {
padding: 15px 0;
font-size: 20px;
font-weight: bold;
text-align: center;
}
.tab-body table {
width: 100%;
table-layout: fixed;
border-collapse: collapse;
}
.tab-body table td, .tab-body table th {
height: 32px;
line-height: 32px;
padding: 5px;
border: #ddd 1px solid;
text-align: center;
}
.oblique-line {
position: relative;
width: 80px;
line-height: 5px;
text-align: left;
}
.oblique-line:before {
content: "";
position: absolute;
width: 1px;
height: 100px; /*斜线长度*/
top: 0%;
left: 0%;
background-color: #ddd;
display: block;
transform: rotate(-65deg); /*调整角度*/
transform-origin: top;
}
.left-bottom-div {
height: 22px;
line-height: 22px;
position: absolute;
left: 4px;
bottom: 0px;
}
.right-top-div {
height: 22px;
line-height: 22px;
position: absolute;
right: 4px;
top: 0px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="tab-body">
<table cellpadding="0" cellspacing="0" style="table-layout: fixed; width: 100%;">
<thead>
<tr>
<th class="oblique-line">
<div>
<div class="left-bottom-div">子项</div>
<div class="right-top-div">月份</div>
</div>
</th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
<th>7</th>
<th>8</th>
<th>9</th>
<th>10</th>
<th>11</th>
<th>12</th>
</tr>
</thead>
<tbody id="thActualContent">
</tbody>
</table>
</div>
</div>
</body>
</html>
非特殊说明，本文版权归 LiuCabbage 所有，转载请注明出处.
本文标题： table表格表头单元格添加斜线
