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

不要将表格宽度设置为auto。将其设置为列宽度的总和。

Answer 2

由于您的列具有固定大小，因此您应使用table-layout: fixed和固定宽度（非自动）。

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

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

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

2 个答案: