HTML的<table>多级表头绘制

<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">0td>
                <td>1td>
                <td>2td>
                <td>3td>
                <td>4td>
                <td>5td>
                <td>6td>
                <td>7td>
                <td>8td>
                <td>9td>
                <td>10td>
                <td>11td>
                <td>12td>
                <td>13td>
                <td>14td>
                <td>15td>
                <td colspan="2" align="center">16td>
            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>17td>
                <td>18td>
                <td>19td>
                <td>20td>
                <td>21td>
                <td>22td>
                <td>23td>
                <td>24td>
                <td>25td>
                <td>26td>
                <td>27td>
                <td>28td>
                <td>29td>
                <td>30td>
                <td>31td>
                <td>32td>
                <td>33td>
                <td>34td>
                <td>35td>
            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;
    }

效果图如下:
HTML的<table>多级表头绘制_第1张图片

你可能感兴趣的:(html,前端)