HTML的＜table＞多级表头绘制

NIshihara

已于 2023-03-16 17:44:04 修改

阅读量5.4k

点赞数 5

文章标签： html 前端

于 2022-03-14 15:22:02 首次发布

本文链接：https://blog.csdn.net/weixin_43883951/article/details/123479554

版权

<table border="1" cellspacing="0" cellpadding="10" width="100%" align="center">
        <thead>
            <tr class="firstHead">
                <th colspan="5">基本工资</th>
                <th colspan="3">基础性绩效</th>
                <th colspan="1">奖励性绩效</th>
                <th colspan="1" rowspan="2">绩效考核奖</th>
                <th colspan="1" rowspan="2">上年度绩效工资</th>
                <th colspan="1" rowspan="2">上年度绩效考核奖</th>
                <th colspan="1" rowspan="2">X项目小计</th>
                <th colspan="1" rowspan="2">上年度X项目小计</th>
                <th colspan="1" rowspan="2">房贴</th>
                <th colspan="1" rowspan="2">德育导师</th>
                <th colspan="1" rowspan="2">临时补发</th>
                <th colspan="2" rowspan="2">应发工资</th>
            </tr>
            <tr class="twoHead">
                <th colspan="2">岗位工资</th>
                <th>薪级工资</th>
                <th>临时性补贴</th>
                <th >小计</th>
                <th>岗位津贴</th>
                <th>生活补贴</th>
                <th>小计</th>
                <th>院聘</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td colspan="2" align="center">0</td>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
                <td>6</td>
                <td>7</td>
                <td>8</td>
                <td>9</td>
                <td>10</td>
                <td>11</td>
                <td>12</td>
                <td>13</td>
                <td>14</td>
                <td>15</td>
                <td colspan="2" align="center">16</td>
            </tr>
            </tbody>
            <thead>
            <tr class="firstHead">
                <th colspan="7">应扣款项</th>
                <th colspan="11">个人所得税</th>
                <th colspan="1" rowspan="2">实发工资</th>
            </tr>
            <tr class="twoHead">
                <th>工会费</th>
                <th>养老金</th>
                <th>职业年金</th>
                <th>医保金</th>
                <th>失业金</th>
                <th>公积金</th>
                <th>扣款小计</th>
                <th>专项扣除</th>
                <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>17</td>
                <td>18</td>
                <td>19</td>
                <td>20</td>
                <td>21</td>
                <td>22</td>
                <td>23</td>
                <td>24</td>
                <td>25</td>
                <td>26</td>
                <td>27</td>
                <td>28</td>
                <td>29</td>
                <td>30</td>
                <td>31</td>
                <td>32</td>
                <td>33</td>
                <td>34</td>
                <td>35</td>
            </tr>
            </tbody>
    </table>

table{
        border: 1px solid #f5f5f5;
        border-width:1px 0px 0px 1px;
        border-collapse:collapse;
        width:100%;
        color: #909399;
    }
    td{
        border: 1px solid #f5f5f5;
        border-width:0px 1px 1px 0px;
        padding: 10px;
        height: 50px;
        text-align: center;
        font-size: 12px;
        color: #606266
    }
    th{
        border: 1px solid #f5f5f5;
        border-width:0px 1px 1px 0px;
    }