如何在Pug（动态HTML）开发中将指定表格列单独显示在新行

云原生阿岚

2026-9-29

解决方案

明确结论：不需要修改自定义CSS，只要调整现有tr结构、给第二行的td补充colspan属性即可实现效果，同时可以删除冗余的嵌套table避免样式冲突。

调整要点

第二行的td需要占满整行宽度，给它加上colspan属性，值等于表格总列数（操作按钮1列 + 前序渲染的8个数据列，也可以用1 + (filter.table.columns.length - 1)动态计算，不用硬编码）
删掉第二行里嵌套的table，直接把状态标题和内容放在td内即可，嵌套table反而会导致宽度适配问题
可以合并重复的状态判断逻辑，减少冗余代码

修改后的示例代码

tbody(class="...")
    each row in filter.table.data
        // 第一行：操作按钮 + 基础数据列
        tr
            td(class="cursor-pointer" style="text-align:center;width:110px") 
                button(...) 
                    span(class="fa fa-search")
                button(...) 
                    span(class="fa fa-user")
                button(...) 
                    span(class="fa fa-power-off")
            // 合并重复的td逻辑，把opacity判断放到style里
            td(
                ng-repeat="column in filter.table.columns track by $index" 
                ng-if="!($index == 9)"
                style="opacity: {{row.status == 7801 ? 1 : 0.4}}"
            )
                span {{ row[column.binding] }}
        // 第二行：状态列，占满整行
        tr
            td(
                colspan="{{1 + (filter.table.columns.length - 1)}}"
                style="opacity: {{row.status == 7801 ? 1 : 0.4}}"
            )
                div(style="font-size:10px; font-weight: bold; text-align: center; padding-top: 4px")
                    {{ filter.table.columns[9].label }}
                div(style="text-align: center")
                    span(class="modal-title" ng-click="modals.text.open(row)") {{ row[filter.table.columns[9].binding] }}