QWeb中无法设置Sl No列宽度问题求助

我懂你这种头疼的感觉——明明给Sl No列的th和td都加了width设置，结果完全没生效，这在Odoo的QWeb报表里太常见了，主要是因为Bootstrap的表格样式（你用了table-condensed）或者Odoo默认的报表布局规则在偷偷覆盖你的自定义宽度。下面给你几个亲测有效的解决方案：

方案1：强制表格使用固定布局（最推荐） #

默认情况下，表格是table-layout: auto模式，会根据列内容自动调整宽度，完全无视你设置的比例。给表格加上table-layout: fixed和width:100%后，浏览器会严格按照你定义的列宽比例来渲染：

修改你的table标签：

<table class="table table-condensed" style="table-layout: fixed; width: 100%;">

然后同步修改Sl No的th和td的样式：

<!-- 表头的Sl No列 -->
<th class="text-left" style="border-left:1px solid black; width:5%;">Sl no</th>

<!-- 表体的Sl No列 -->
<td class="text-left" style="width:5%;">
    <span t-esc="count"/>
    <t t-set="count" t-value="count + 1"/>
</td>

方案2：用自定义CSS类提高样式优先级 #

如果还是不行，可能是你的行内样式被更高优先级的样式覆盖了，这时候可以定义一个自定义类，用!important强制生效（报表场景下用这个没问题，不会影响全局样式）：

先在报表的头部或者对应的CSS文件里添加：

.sl-no-col {
    width: 5% !important;
    min-width: 40px; /* 可选，防止列太窄导致序号溢出 */
}

然后给th和td加上这个类：

<th class="text-left sl-no-col" style="border-left:1px solid black;">Sl no</th>
<td class="text-left sl-no-col"><span t-esc="count"/> ...</td>

方案3：检查样式冲突（排查用） #

如果上面两个方案都没效果，打开浏览器开发者工具（按F12），选中Sl No列的元素，查看"Styles"面板，看看哪些样式在覆盖你的width设置，然后针对性地调整对应的样式属性。

下面是修改后的完整代码（用方案1的修改）：

<div class="row" style="border:1px solid black;">
    <table class="table table-condensed" style="table-layout: fixed; width: 100%;">
        <thead style="border: 1px solid black;">
            <tr>
                <th class="text-left" style="border-left:1px solid black; width:5%;">Sl no</th>
                <th class="text-center" style="border-left:1px solid black;">Account</th>
                <th class="text-center" style="border-left:1px solid black;">Partner</th>
                <th class="text-center" style="border-left:1px solid black;">Internal Reference</th>
                <th class="text-center" style="border-left:1px solid black;">Description</th>
                <th class="text-center" style="border-left:1px solid black;">Debit Amount(AED)</th>
                <th class="text-center" style="border-left:1px solid black;">Credit Amount(AED)</th>
            </tr>
        </thead>
        <tbody style="border-bottom: 1px solid black;">
            <t t-set="count" t-value="1"/>
            <tr t-foreach="o.line_ids" t-as="l" style="border-top: 1px solid black;">
                <td class="text-left" style="width:5%;">
                    <span t-esc="count"/>
                    <t t-set="count" t-value="count + 1"/>
                </td>
                <td class="text-left" style="border-left:1px solid black;"><span t-field="l.account_id.name"/></td>
                <td class="text-left" style="border-left:1px solid black;"><span t-field="l.partner_id"/></td>
                <td class="text-left" style="border-left:1px solid black;"><span t-field="l.account_id.code"/></td>
                <td class="text-left" style="border-left:1px solid black;"><span t-field="l.name"/></td>
                <td class="text-right" style="border-left:1px solid black;"><span t-field="l.debit"/></td>
                <td class="text-right" style="border-left:1px solid black;"><span t-field="l.credit"/></td>
            </tr>
            <tr>
                <td style="display:inline;border-left:1px solid black;border-top:1px solid black;">
                    <span t-if="o.ref">
                        <span>Reference:</span><span><span t-field="o.ref"/></span>
                    </span>
                </td>
                <td style="border-top:1px solid black;">
                </td>
                <td style="border-top:1px solid black;">
                </td>
                <td style="border-top:1px solid black;">
                </td>
                <td style="border-top:1px solid black;">
                </td>
                <td style="border-top:1px solid black;">
                </td>
                <td style="border-top:1px solid black;">
                </td>
            </tr>
        </tbody>
    </table>
</div>

这个修改应该能让你的Sl No列乖乖变成5%的宽度了，试试吧！

内容的提问来源于stack exchange，提问作者vbt