CSS 规则在包含许多列的表中被忽略答案

【问题标题】：CSS rules are ignored in table with many columnsCSS 规则在包含许多列的表中被忽略
【发布时间】：2014-02-06 05:22:30
【问题描述】：

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

我已经为不同类型的列、行等定义了所有的 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 规则被忽略，我怎样才能让浏览器尊重它们？

【问题讨论】：

标签： html css width html-table

【解决方案1】：

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

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

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

【讨论】：

这不起作用，因为列数是在报告运行时动态确定的。该表是使用 ajax 检索的数据在 javascript 中创建的。此数据包含有关列的信息。
上面的代码应该适用于更多的列。试试看。您还可以计算宽度的总和并将表格宽度设置为固定值，因为您正在动态生成页面。
它确实有效，谢谢。有趣的是为什么width: auto 不起作用？
auto 和 % 值不遵守固定的列宽。实际上，auto 确实如此，只要没有其他约束（在这种情况下，表不适合容器，因此它被视为具有width:100%）。在此处阅读table-layout：developer.mozilla.org/en-US/docs/Web/CSS/table-layout
好的，我买了“其他约束”部分——但宽度仍然没有设置为 100%——它比这大得多，并且显示了滚动条。

【解决方案2】：

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

【讨论】：

这不起作用，因为列数是在报告运行时动态确定的。该表是使用 ajax 检索的数据在 javascript 中创建的。此数据包含有关列的信息。