700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > table表格表头单元格添加斜线

table表格表头单元格添加斜线

时间:2020-12-19 01:36:26

相关推荐

table表格表头单元格添加斜线

<!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>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。