{首页主词},&

HTML純CSS實現(xiàn)table表格單元格斜線表頭

admin
2023年6月8日 10:13 本文熱度 1110
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>斜線表頭</title>
    <style>
        /* 基本表格元素 */
        table {
            border-collapse: collapse;
        }
 
        th,
        td {
            border: 1px solid #e6e6e6;
            padding: 5px;
            text-align: center;
            /* font-weight: 400; */
        }
 
        /* tr td {
            width: 48px;
        }
 
        tr td:first-child {
            width: 48px;
        } */
        .index_td {
            width: 48px;
        }
 
        /* th單元格 */
        .slash-wrap {
            position: relative;
            box-sizing: border-box;
            width: 150px;
            height: 80px;
        }
 
        /* 斜線 */
        .slash1 {
            position: absolute;
            display: block;
            top: 0;
            left: 0;
            /* 斜邊邊長 */
            /* Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2)) */
            /* Math.sqrt(Math.pow(150, 2) + Math.pow(80, 2)) = 170 */
            width: 100px;
            height: 1px;
            background-color: #e6e6e6;
            /* 旋轉(zhuǎn)角度計算公式 */
            /*  Math.atan(height / width) * 180 / Math.PI  */
            /*  Math.atan(80 / 150) * 180 / Math.PI  = 28.072486935852954 */
            transform: rotate(53.13010235415598deg);
            transform-origin: top left;
        }
 
        /* 斜線 */
        .slash2 {
            position: absolute;
            display: block;
            top: 0;
            left: 0;
            /* 斜邊邊長 */
            /* Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2)) */
            /* Math.sqrt(Math.pow(150, 2) + Math.pow(80, 2)) = 170 */
            width: 170px;
            height: 1px;
            background-color: #e6e6e6;
            /* 旋轉(zhuǎn)角度計算公式 */
            /*  Math.atan(height / width) * 180 / Math.PI  */
            /*  Math.atan(80 / 150) * 180 / Math.PI  = 28.072486935852954 */
            transform: rotate(28.072486935852954deg);
            transform-origin: top left;
        }
 
        /* 左下角文字 */
        .left {
            position: absolute;
            /* 左下角 left:0; bottom: 0; */
            left: 3px;
            bottom: 4px;
        }
 
        /* 右上角文字 */
        .mid {
            position: absolute;
            /* 右上角 right:0; top: 0; */
            left: 42px;
            bottom: 5px;
        }
 
        /* 右上角文字 */
        .right {
            position: absolute;
            /* 右上角 right:0; top: 0; */
            right: 8px;
            top: 15px;
            letter-spacing: 10px;
        }
    </style>
</head>
<body>
    <div>
        <table>
            <tr>
                <th class="slash-wrap" rowspan="2" colspan="2">
                    <span class="left"><i style="display: block;width: 18px;">序</i><i
                            style="width: 18px;display: block;padding-left: 14px;">號</i></span>
                    <span class="slash1"></span>
                    <span class="mid"><i style="display: block;width: 18px;">米</i><i
                            style="width: 18px;display: block;padding-left: 26px;">數(shù)</i></span>
                    <span class="slash2"></span>
                    <span class="right">尺碼</span>
                </th>
                <th colspan="2">25#</th>
                <th colspan="2">26#</th>
                <th colspan="2">27#</th>
                <th colspan="2">28#</th>
                <th colspan="2">29#</th>
                <th colspan="2">30#</th>
                <th colspan="2">31#</th>
                <th colspan="2">32#</th>
                <th rowspan="2">余米</th>
            </tr>
            <tr>
                <td>扎號</td>
                <td>件數(shù)</td>
                <td>扎號</td>
                <td>件數(shù)</td>
                <td>扎號</td>
                <td>件數(shù)</td>
                <td>扎號</td>
                <td>件數(shù)</td>
                <td>扎號</td>
                <td>件數(shù)</td>
                <td>扎號</td>
                <td>件數(shù)</td>
                <td>扎號</td>
                <td>件數(shù)</td>
                <td>扎號</td>
                <td>件數(shù)</td>
            </tr>
            <tr>
                <td class="index_td">1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
            </tr> 
        </table>
    </div>
</body>
</html>
該文章在 2023/6/8 10:13:57 編輯過
關(guān)鍵字查詢
相關(guān)文章
正在查詢...
點晴ERP是一款針對中小制造業(yè)的專業(yè)生產(chǎn)管理軟件系統(tǒng),系統(tǒng)成熟度和易用性得到了國內(nèi)大量中小企業(yè)的青睞。
點晴PMS碼頭管理系統(tǒng)主要針對港口碼頭集裝箱與散貨日常運作、調(diào)度、堆場、車隊、財務(wù)費用、相關(guān)報表等業(yè)務(wù)管理，結(jié)合碼頭的業(yè)務(wù)特點，圍繞調(diào)度、堆場作業(yè)而開發(fā)的。集技術(shù)的先進性、管理的有效性于一體，是物流碼頭及其他港口類企業(yè)的高效ERP管理信息系統(tǒng)。
點晴WMS倉儲管理系統(tǒng)提供了貨物產(chǎn)品管理,銷售管理,采購管理,倉儲管理,倉庫管理,保質(zhì)期管理,貨位管理,庫位管理,生產(chǎn)管理,WMS管理系統(tǒng),標簽打印,條形碼,二維碼管理,批號管理軟件。
點晴免費OA是一款軟件和通用服務(wù)都免費，不限功能、不限時間、不限用戶的免費OA協(xié)同辦公管理系統(tǒng)。