使用CSS网格重新定位HTML表格中的单元格

我有一个典型的2列（标签控件布局）html表，其布局需要更改，使用纯CSS（即不更改html）

下面是示例html代码：

<table class="grid-table-2-col">
    <tbody>
        <tr>
            <td><span class="StdLabel">Label1</span></td>
            <td><input type="text" placeholder="input 1"></td>
        </tr>
        <tr>
            <td><span class="StdLabel">Label2</span></td>
            <td><input type="text" placeholder="input 2"></td>
        </tr>
        <tr>
            <td><span class="StdLabel">Label3</span></td>
            <td><input type="text" placeholder="input 3"></td>
        </tr>
        <tr>
            <td><span class="StdLabel">Label4</span></td>
            <td><input type="text" placeholder="input 4"></td>
        </tr>
        <tr>
            <td><span class="StdLabel">Label5</span></td>
            <td><input type="text" placeholder="input 5"></td>
        </tr>
        <tr>
            <td><span class="StdLabel">Label6</span></td>
            <td><input type="text" placeholder="input 6"></td>
        </tr>
        <tr>
            <td><span class="StdLabel">Label7</span></td>
            <td><input type="text" placeholder="input 7"></td>
        </tr>
        <tr>
            <td><span class="StdLabel">Label8</span></td>
            <td><input type="text" placeholder="input 8"></td>
        </tr>
        <tr>
            <td><span class="StdLabel">Label9</span></td>
            <td><input type="text" placeholder="input 9"></td>
        </tr>
        <tr>
            <td><span class="StdLabel">Label10</span></td>
            <td><input type="text" placeholder="input 10"></td>
        </tr>
    </tbody>
</table>

我想摆脱它的硬编码性质

---

有谁有更好的想法来改进这个CSS吗？

如果你必须使用那种精确的HTML，你可以使用下面的代码来实现你想要的结果

.grid-table-2-col{
最大宽度：500px；
保证金：自动；
}
.网格-表格-2-柱体{
显示器：flex；
柔性包装：包装；
}
.grid-table-2-col tr{
宽度：50%；
填充物：5px10px；
框大小：边框框；
}
.grid-table-2-col tr td{
显示：块；
}
.grid-table-2-col输入[type=“text”]{
宽度：100%；
}

标签1
标签2
标签3
标签4
标签5
标签6
标签7
标签8
标签9
标签10

如果您必须使用准确的HTML，您可以使用以下代码实现所需的结果

.grid-table-2-col{
最大宽度：500px；
保证金：自动；
}
.网格-表格-2-柱体{
显示器：flex；
柔性包装：包装；
}
.grid-table-2-col tr{
宽度：50%；
填充物：5px10px；
框大小：边框框；
}
.grid-table-2-col tr td{
显示：块；
}
.grid-table-2-col输入[type=“text”]{
宽度：100%；
}

标签1
标签2
标签3
标签4
标签5
标签6
标签7
标签8
标签9
标签10

您只需更改td和tr的样式，即可更改视图：

td{display:flex；width:50%；}
tr{显示：内联块；最大宽度：100%；}

标签1
标签2
标签3
标签4
标签5
标签6
标签7
标签8
标签9
标签10

您只需更改td和tr的样式，即可更改视图：

td{display:flex；width:50%；}
tr{显示：内联块；最大宽度：100%；}

标签1
标签2
标签3
标签4
标签5
标签6
标签7
标签8
标签9
标签10

酷！似乎我对CSS网格想得太多了。：）酷！似乎我对CSS网格想得太多了。：）

.grid-table-2-col > tbody {
    display: grid;
    grid-template-areas: 
        'R1C1 R1C2'
        'R2C1 R2C2'
        'R3C1 R3C2'
        'R4C1 R4C2'
        'R5C1 R5C2'
        'R6C1 R6C2'
        'R7C1 R7C2'
        'R8C1 R8C2'
        'R9C1 R9C2'
        'R10C1 R10C2';
    grid-template-columns: 50% 50%;
    grid-gap: 10px;
    padding: 2px;
}
    .grid-table-2-col > tbody > tr:nth-child(odd) > td:nth-child(1) {grid-area: L1;}
    .grid-table-2-col > tbody > tr:nth-child(odd) > td:nth-child(2) {grid-area: C1;}

    .grid-table-2-col > tbody > tr:nth-child(1) {grid-area: R1C1; display: grid; grid-template-areas: 'L1' 'C1'; grid-template-columns: 100%;}
    .grid-table-2-col > tbody > tr:nth-child(2) {grid-area: R1C2; display: grid; grid-template-areas: 'L1' 'C1'; grid-template-columns: 100%;}
    .grid-table-2-col > tbody > tr:nth-child(3) {grid-area: R2C1; display: grid; grid-template-areas: 'L1' 'C1'; grid-template-columns: 100%;}
    .grid-table-2-col > tbody > tr:nth-child(4) {grid-area: R2C2; display: grid; grid-template-areas: 'L1' 'C1'; grid-template-columns: 100%;}
    .grid-table-2-col > tbody > tr:nth-child(5) {grid-area: R3C1; display: grid; grid-template-areas: 'L1' 'C1'; grid-template-columns: 100%;}
    .grid-table-2-col > tbody > tr:nth-child(6) {grid-area: R3C2; display: grid; grid-template-areas: 'L1' 'C1'; grid-template-columns: 100%;}
    .grid-table-2-col > tbody > tr:nth-child(7) {grid-area: R4C1; display: grid; grid-template-areas: 'L1' 'C1'; grid-template-columns: 100%;}
    .grid-table-2-col > tbody > tr:nth-child(8) {grid-area: R4C2; display: grid; grid-template-areas: 'L1' 'C1'; grid-template-columns: 100%;}
    .grid-table-2-col > tbody > tr:nth-child(9) {grid-area: R5C1; display: grid; grid-template-areas: 'L1' 'C1'; grid-template-columns: 100%;}
    .grid-table-2-col > tbody > tr:nth-child(10) {grid-area: R5C2; display: grid; grid-template-areas: 'L1' 'C1'; grid-template-columns: 100%;}
    .grid-table-2-col > tbody > tr:nth-child(11) {grid-area: R6C1; display: grid; grid-template-areas: 'L1' 'C1'; grid-template-columns: 100%;}
    .grid-table-2-col > tbody > tr:nth-child(12) {grid-area: R6C2; display: grid; grid-template-areas: 'L1' 'C1'; grid-template-columns: 100%;}
    .grid-table-2-col > tbody > tr:nth-child(13) {grid-area: R7C1; display: grid; grid-template-areas: 'L1' 'C1'; grid-template-columns: 100%;}
    .grid-table-2-col > tbody > tr:nth-child(14) {grid-area: R7C2; display: grid; grid-template-areas: 'L1' 'C1'; grid-template-columns: 100%;}
    .grid-table-2-col > tbody > tr:nth-child(15) {grid-area: R8C1; display: grid; grid-template-areas: 'L1' 'C1'; grid-template-columns: 100%;}
    .grid-table-2-col > tbody > tr:nth-child(16) {grid-area: R8C2; display: grid; grid-template-areas: 'L1' 'C1'; grid-template-columns: 100%;}
    .grid-table-2-col > tbody > tr:nth-child(17) {grid-area: R9C1; display: grid; grid-template-areas: 'L1' 'C1'; grid-template-columns: 100%;}
    .grid-table-2-col > tbody > tr:nth-child(18) {grid-area: R9C2; display: grid; grid-template-areas: 'L1' 'C1'; grid-template-columns: 100%;}
    .grid-table-2-col > tbody > tr:nth-child(19) {grid-area: R10C1; display: grid; grid-template-areas: 'L1' 'C1'; grid-template-columns: 100%;}
    .grid-table-2-col > tbody > tr:nth-child(20) {grid-area: R10C2; display: grid; grid-template-areas: 'L1' 'C1'; grid-template-columns: 100%;}