html原生table三级 多层表头表格配置

■ 两级表头

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>两级表头</title>
  <style type="text/css">
    td,
    th {
      font-style: normal;
      font-weight: normal;
      text-align: center;
    }

    tr {
      height: 48px;
    }

    .firstHead th {
      font-size: 14px;
      font-weight: bold;
    }

    .secondHead th {
      font-size: 13px;
      font-weight: bold;
    }

    table {
      border-collapse: collapse;
      border-color: #D8DFE6;
    }

    table thead {
      background: #F3FDFF;
    }
  </style>
</head>

<body>
  <div class="table">
    <table border="1" width="100%">
      <colgroup>
        <col style="width: 150px;" />
        <col style="width: 50px;" />
        <col style="width: 100px;" />
        <col style="width: 100px;" />
        <col style="width: 100px;" />
        <col style="width: 100px;" />
        <col style="width: 100px;" />
        <col style="width: 100px;" />
        <col style="width: 100px;" />
        <col style="width: 100px;" />
      </colgroup>
      <thead>
        <tr class="firstHead">
          <th rowspan="2" colspan="1">
            项目
          </th>
          <th rowspan="2" colspan="1">
            行次
          </th>
          <th rowspan="1" colspan="3">
            平均资金占用额
          </th>
          <th rowspan="1" colspan="3">
            投资收益
          </th>
          <th rowspan="1" colspan="2">
            投资回报率
          </th>
        </tr>
        <tr class="secondHead">
          <th> 上年数 </th>
          <th> 本年预算数 </th>
          <th> 增长率 </th>
          <th> 上年数 </th>
          <th> 本年预算数 </th>
          <th> 增长率 </th>
          <th> 上年数 </th>
          <th> 本年预算数 </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
      </tbody>
    </table>
  </div>
</body>

</html>

效果图:
在这里插入图片描述

■ 三级表头

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>三级表头</title>
  <style type="text/css">
    td,
    th {
      font-style: normal;
      font-weight: normal;
      text-align: center;
    }

    tr {
      height: 48px;
    }

    .firstHead th,
    .secondHead th,
    .thirdHead th {
      font-size: 14px;
      font-weight: bold;
    }

    table {
      border: none;
      border-collapse: collapse;
      border-color: #D8DFE6;
    }

    table thead {
      background: #F3FDFF;
    }

    table tbody tr {
      height: 50px;
    }
  </style>
</head>

<body>

  <body>
    <div class="table">
      <table border="1" width="100%">
        <colgroup>
          <col style="width: 50px;" />
          <col style="width: 100px;" />
          <col style="width: 100px;" />
          <col style="width: 100px;" />
          <col style="width: 100px;" />
          <col style="width: 100px;" />
          <col style="width: 100px;" />
          <col style="width: 100px;" />
          <col style="width: 100px;" />
          <col style="width: 100px;" />
        </colgroup>
        <thead>
          <tr class="firstHead">
            <th rowspan="3"> 序号 </th>
            <th rowspan="3"> 项目名称 </th>
            <th rowspan="3"> 自有资金 </th>
            <th rowspan="1" colspan="6"> 本年计划投资额 </th>
            <th rowspan="3"> 备注 </th>
          </tr>
          <tr class="secondHead">
            <th rowspan="3"> 合计 </th>
            <th colspan="3"> 其中: </th>
            <th colspan="2"> 其中: </th>
          </tr>
          <tr class="thirdHead">
            <th> 自有资金 </th>
            <th> 对外贷款 </th>
            <th> 其他 </th>
            <th> 主业 </th>
            <th> 非主业 </th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
        </tbody>
      </table>
    </div>
  </body>
</body>

</html>

在这里插入图片描述

■ 四级表头

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>四级表头</title>
  <style type="text/css">
    td,
    th {
      font-style: normal;
      font-weight: normal;
      text-align: center;
    }

    tr {
      height: 48px;
    }

    .firstHead,
    .secondHead,
    .thirdHead {
      height: 42px;
    }

    .fourthHead {
      height: 64px;
    }

    .firstHead th {
      font-size: 15px;
      font-weight: bold;
    }

    table {
      border: none;
      border-collapse: collapse;
      border-color: #D8DFE6;
    }

    table thead {
      background: #F3FDFF;
    }

    table tbody td {
      width: 6.3%;
    }

    table tbody tr {
      height: 50px;
    }
  </style>
</head>

<body>
  <div class="table">
    <table border="1" width="100%">
      <thead>
        <tr class="firstHead">
          <th colspan="1" rowspan="5" width="4%">序号</th>
          <th colspan="1" rowspan="5" width="6.4%">终端使用人</th>
          <th colspan="11">工作开展情况</th>
        </tr>
        <tr class="secondHead">
          <th colspan="1" rowspan="4">工作量总计</th>
          <th colspan="6">采集情况</th>
          <th colspan="4">检查情况</th>
        </tr>
        <tr class="thirdHead">
          <th colspan="3" rowspan="1">人口</th>
          <th colspan="3" rowspan="1">房屋</th>
          <th colspan="4" rowspan="1">房屋隐患</th>
        </tr>
        <tr class="fourthHead">
          <th>总数</th>
          <th>户籍</th>
          <th>流动</th>
          <th>总数</th>
          <th>机动车</th>
          <th>非机动车</th>
          <th>总数</th>
          <th>生活安全</th>
          <th>出租管理</th>
          <th>房屋功能</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
      </tbody>
    </table>
  </div>
</body>

</html>

在这里插入图片描述

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:游动-白 设计师:我叫白小胖 返回首页
评论

打赏作者

D.U.S.Tべ

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值