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

大番薯没有心

已于 2022-06-22 13:58:34 修改

阅读量1.1k

点赞数 1

分类专栏：前端相关文章标签：前端 html css

于 2022-06-22 13:57:17 首次发布

本文链接：https://blog.csdn.net/m0_37230651/article/details/125407916

版权

前端相关专栏收录该内容

15 篇文章 0 订阅

订阅专栏

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