表格的多层表头设计

最新推荐文章于 2022-03-14 15:22:02 发布

原创最新推荐文章于 2022-03-14 15:22:02 发布 · 997 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端

本文介绍了在前端开发中如何设计和实现具有多层表头的表格，包括布局策略、数据组织以及交互考虑，帮助提升数据展示的清晰度和用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图

<table width="100%" border="0" cellpadding="8" cellspacing="0" class="tableBasic">
    <caption>2019年1月份计提</caption>
    <tr>
        <th rowspan="4">序号</th>
        <th rowspan="4">店员</th>
    </tr>
    <tr>
        <th colspan="8">电子面单</th>
        <th colspan="2">纸质面单</th>
    </tr>
    <tr>
        <th colspan="4">现结(微信、余额)</th>
        <th colspan="4">客户月结</th>
        <th>现结</th>
        <th>客户月结</th>
    </tr>
    <tr>
        <td>揽件个数</td>
        <td>实收金额</td>
        <td>成本</td>
        <td>利润</td>
        <td>揽件个数</td>
        <td>实收金额</td>
        <td>成本</td>
        <td>利润</td>
        <td>揽件个数</td>
        <td>揽件个数</td>
    </tr>
    <tr>
            <td>007</td>
            <td>弗兰</td>
            <td>5件</td>
            <td>100元</td>
            <td>20元</td>
            <td>80元</td>
            <td>5件</td>
            <td>100元</td>
            <td>20元</td>
            <td>80元</td>
            <td>20件</td>
            <td>20件</td>
    </tr>
</table>