in the requirements of the project, vue-for is used to load the data and display it in tr, but the data is required to be displayed in two rows. My solution is as follows:

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

now it is possible to load and display two rows of data, but now there is a problem that the tr of the inner table cannot be aligned with the thead of the outer table. Is it true that only css can move one by one?
as shown in figure

there is another problem, that is, there are two icons next to the light brightness, which somehow cannot be displayed, and the path is fine, because the cold and warm light icons can also be displayed.
this is the code with no icon displayed:

.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;
}