html - CSS 规则在包含许多列的表中被忽略

Question

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

我已经为不同类型的列、行等定义了所有的 css 样式 - 但是在遵守颜色规则的同时，忽略了所有大小调整规则。我为每种类型的列指定了精确的宽度值——它们都被简单地忽略了。我将表格剪切成一个单独的文件 - 并确认了结果。我将列数减少到最少 - 结果相同。我在 jsfiddle 上测试过 - 结果相同。我在 Firefox、Chrome 和 Opera 中进行了测试 - 结果相同(我在 Mac 上工作，所以没有要测试的 IE)。

jsfiddle 在这里:http://jsfiddle.net/6d76s/

这是 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:

div.report-holder { margin: 30px 0px; width: 100%; overflow: auto; }

table.report { width: auto; }
table.report th { background: darkGrey; color: white; }
table.report tr.odd { background: white; }
table.report tr.even { background: #f7f7f7; }
table.report td, table.report th { padding: 1px 3px; }
table.report td span, table.report th span { display: block; }
table.report td.customer, table.report th.customer { width: 200px; text-align: left; }
table.report td.date, table.report th.date { width: 60px; text-align: left; }
table.report td.slm, table.report th.slm { width: 65px; text-align: center; }
table.report td.product, table.report th.product { width: 100px !important; text-align: center; }

为什么 width css 规则被忽略，我怎样才能让浏览器遵守它们？

Answer 1

由于您的列具有固定大小，因此您应该使用 table-layout: fixed 和固定宽度(不是自动)。

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

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