Html CSS规则在具有许多列的表中被忽略

我需要显示一个带有简单交叉表的表：前三列包含组级信息，其余列包含总和值

我已经为不同类型的列、行等定义了所有css样式——但是，虽然遵守了颜色规则，但忽略了所有大小规则。我为每种类型的列指定了精确的宽度值，它们都被忽略了。我把表格切成一个单独的文件，并确认了结果。我将列的数量减少到最小-结果相同。我在JSFIDLE上进行了测试——结果也是一样。我在Firefox、Chrome和Opera上进行了测试，结果与我在mac上的测试结果相同，所以没有IE需要测试

JSFIDLE在这里：

以下是HTML：

<div id="report-holder" class="report-holder">
    <table class="report">
        <tbody>
            <tr>
                <th class="customer">Customer</th>
                <th class="date">Date</th>
                <th class="slm">Salesman</th>
                <th class="product"><span class="item-id">1024</span><span class="item-desc">PEELED TOMATOES 24/796 ML (796 ML)</span></th>
                <th class="product"><span class="item-id">1034</span><span class="item-desc">WHOLE CDN TOMATOES 24/796ML (796 ML)</span></th>
                <th class="product"><span class="item-id">1040</span><span class="item-desc">ITALIAN PEELED TOM 6/2.84 L (2.84 L)</span></th>
                <th class="product"><span class="item-id">1115</span><span class="item-desc">KTCHN RDY TOM 24/796ML (796 ML)</span></th>
                <th class="product"><span class="item-id">1116</span><span class="item-desc">SPICED DICED TOM 24/796ML (796 ML)</span></th>
            </tr>
            <tr class="odd">
                <td class="customer"><span>100307 METRO RICHELIEU INC</span><span>635 AVE. NEWTON, QUEBEC, QC</span></td>
                <td class="date">4 Feb 2014</td>
                <td class="slm">20</td>
                <td class="product">2</td>
                <td class="product">2</td>
                <td class="product">2</td>
                <td class="product">2</td>
                <td class="product">0</td>
            </tr>
        </tbody>
    </table>
</div>

---

为什么会忽略宽度css规则？我如何让浏览器遵守这些规则？

不要将表格宽度设置为自动。将其设置为列宽度之和。

由于列的大小固定，因此应使用表布局：固定和固定宽度非自动

table.report { width: 0; table-layout: fixed;}

---

宽度将根据列的宽度自动计算。

这不起作用，因为在运行报告时，列数是动态确定的。该表是使用使用ajax检索的数据在javascript中创建的。此数据包含有关列的信息。上面的代码应适用于更多列。试试看。您还可以计算宽度之和，并将表格宽度设置为固定值，因为您是动态生成页面的。谢谢，它确实有效。有趣的是，为什么不使用宽度：自动工作？自动和%值不遵守固定的列宽。实际上，auto是这样做的，只要在这种情况下没有其他约束，表就不适合容器，因此它被视为具有宽度：100%。阅读这里的表格布局：好的，我买了另一个约束部分-但宽度仍然没有设置为100%-它比这个大得多，并且显示了滚动条。这不起作用，因为在运行报告时，列数是动态确定的。该表是使用使用ajax检索的数据在javascript中创建的。此数据包含有关列的信息。

table.report { width: 0; table-layout: fixed;}