当table里嵌套一个table,怎么让里面table的tr和外面table的thead对齐?

在项目的需求中,用vue-for来加载数据显示到tr中,但数据要求两行显示,我的解决办法是这样:

    <table>
        <thead></thead>
        <tr v-for="item in items">
            <td colspan = "10">
                <table>
                    <tr></tr>
                    <tr></tr>
                </table>
            </td>
        </tr>
    </table>

现在可以实现数据加载两行显示,但现在有个问题就是里面table的tr跟外面table的thead无法对齐,难道真的只有css来一个个地移吗?
如图图片描述

另外有个问题,就是灯光亮度旁边也有两个图标,不知怎么就是显示不出来,路径是没问题的,因为冷光暖光图标也能显示。
这是未显示图标的代码:

.SingleRight .list .list-table tbody .moveRail .lightUp {
    background: url("../img/public/light.png") 5px center no-repeat;
    width: 30px;
    height: 30px;
    margin-left: 13px;
    margin-top: -8px;
}

.SingleRight .list .list-table tbody .moveRail .lightDown {
    background-image: url("../img/public/dark.png");
    width: 20px;
    height: 20px;
    margin-left: -10px;
    margin-top: -5px;
}
阅读 5.4k
1 个回答

是的,因为没有在一个 <table> 环境里,所以必须手动指定每个单元格的宽度。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题