表格切割效果，“两个”表格实现列对应、变化一致

君子使物，不为物使2024-10-25 22:23

如何让两个表格的部分列对应且缩放一致

先看效果

使用一个原生table的即可实现

"两个"表格的视觉效果
让"两个"表格的对应列缩放保持一致

废话不多说，直接上代码

html:

html 复制代码

<html>
    <div>
        <table>
            <caption class="table-name">表格1111111</caption>
            <tbody>
                <tr>
                    <th scope="col">序号</th>
                    <th scope="col">名称</th>
                    <th scope="col" style="width: 100px">单位</th>
                    <th scope="col">数量1</th>
                    <th scope="col">数量2</th>
                </tr>
                <tr>
                    <td>1</td>
                    <td>笔记本</td>
                    <td>本</td>
                    <td>100</td>
                    <td>200</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>笔</td>
                    <td>只</td>
                    <td>100</td>
                    <td>200</td>
                </tr>
            </tbody>
            <tfoot>
                <!-- 此行仅分割用 -->
                <tr style="display:block;height:20px"></tr>

                <tr>
                    <td class="none"></td>  <!--  占位 -->
                    <td class="none"></td>  <!--  占位 -->
                    <td class="none">编号</td>
                    <td>A</td>
                    <td>B</td>
                </tr>
                <tr>
                    <td class="none"></td>  <!--  占位 -->
                    <td class="none"></td>  <!--  占位 -->
                    <td class="none">铅封号</td>
                    <td>202410251555555555</td>
                    <td>202410251555555555</td>
                </tr>
            </tfoot>
        </table>
    </div>
</html>

css:

css 复制代码

table{
    margin-top: 20px;
    width: 100%;
    border-spacing: 0;
    color: #606266;

}
.table-name{
    text-align: left;
    font-size: 16px;
    margin-bottom: 8px;
    font-weight: 600;
}
th,td{
    text-align: center;
    border-bottom: 1px solid #eeeeee;
    border-left: 1px solid #eeeeee;
    padding: 4px 0;
}
th:last-child,td:last-child{
    border-right: 1px solid #eeeeee;
}
th{
    border-top: 1px solid #eeeeee;
    background: #f8faff;
}

tfoot tr:nth-child(2){
    td{
        border-top: 1px solid #eeeeee;
    }
}
.none{
    border: none !important;
}

闲话

这是开发中遇到的一个需求，原需求两个表格后面的列是动态的（可能有数量1、数量2、数量3...），下面个表格的列需要和上面的同步，所以想了这么个办法。

个人认为点睛之笔就是那个空白的tr。