相同的HTML不同表格

时间:2018-09-03 19:53:24

标签: bootstrap-4

我有一个非常复杂的表格用于报告。 下面的html代码是通过react生成的。 它是有效的引导程序4和html代码。 每次生成不同的表输出

<table class="text-center table table-bordered table-striped">
    <tbody>
        <tr class="table-secondary">
            <td rowspan="4" colspan="1" style="vertical-align: middle;">Area / Department</td>
            <td rowspan="1" colspan="2">Station Details</td>
        </tr>
        <tr>
            <td rowspan="1" colspan="1">Station No</td>
            <td rowspan="1" colspan="1">Location Name</td>
        </tr>
        <tr>
            <td rowspan="1" colspan="1">129</td>
            <td rowspan="1" colspan="1">Recovery Room</td>
        </tr>
    </tbody>
</table>
<table class="text-center table table-bordered table-striped">
    <tbody>
        <tr class="table-secondary">
            <td rowspan="4" colspan="1" style="vertical-align: middle;">Area / Department</td>
            <td rowspan="1" colspan="2">Station Details</td>
        </tr>
        <tr>
            <td rowspan="1" colspan="1">Station No</td>
            <td rowspan="1" colspan="1">Location Name</td>
        </tr>
        <tr>
            <td rowspan="1" colspan="1">130</td>
            <td rowspan="1" colspan="1">Bonded Warehouse</td>
        </tr>
    </tbody>
</table>

Output for above html

如何每次都生成相同的布局

1 个答案:

答案 0 :(得分:0)

您不能:行为根据内容而改变。

尝试使用某些CSS样式,例如为每个单元格赋予唯一的宽度。

td { width: 150px; }