22 06 2022

undefined

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

延伸阅读
  1. ASP.NET MVC LiuCabbage 个人博客
  2. input 设置 display:none后 jquery无法给input赋值
发表评论