table表格表头合并单元格问题

来源：互联网发布：英敏特信息咨询知乎编辑：程序博客网时间：2024/05/16 15:26

1、效果图

2、代码

 <thead>                <tr>                    <th rowspan="2">班级</th>                    <th rowspan="2">人数</th>                    <th colspan="2">总分平均分</th><th colspan="2">总分平均分(折后)</th>                    <th colspan="3">语文</th><th colspan="3">数学</th>                    <th colspan="3">英语</th><th colspan="5">物理</th><th colspan="5">生物化学</th><th colspan="5">历史</th>                    <th colspan="5">地理</th><th colspan="5">政治</th>                </tr>                <tr>                    <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>                    <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>                    <th>政总折后</th>                    <th>排名</th>                                    </tr>            </thead>

3、表头样式

 tr th {            text-align: center;            border: 0px solid #ccc !important;            border-right-width: 1px !important;            border-bottom: 1px solid #333 !important;            vertical-align: middle !important;        }        tr th.cell-m,        tbody td {            white-space: nowrap;        }        td.highlight {            background-color: whitesmoke !important;        }        td {            text-align: center;        }        td.d {            text-align: right;        }

阅读全文

0 0