有很多列的表格中忽略CSS規則

我需要用一個簡單的交叉表顯示一個表：前三列包含組級別信息，其餘列包含總和值。有很多列的表格中忽略CSS規則

我已經爲不同類型的列，行等定義了所有的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規則忽略，我如何能得到瀏覽器如何兌現？

來源

2014-02-05 Aleks G

由於您的列具有固定大小，因此您應該使用table-layout: fixed和固定寬度（不是自動）。

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

寬度將根據您的列的寬度自動計算。

來源

2014-02-05 21:22:30 helderdarocha

這不起作用，因爲報表運行時列的數量是動態確定的。該表使用使用ajax檢索的數據在javascript中創建。這些數據包含有關列的信息。 –

上面的代碼應該與更多的列一起工作。試試看。您也可以計算寬度的總和，並將表格寬度設置爲固定值，因爲您正在動態生成頁面。 – helderdarocha

它工作，謝謝。有趣的是，爲什麼不'width：auto'工作？ –

請勿將表格寬度設置爲auto。將其設置爲您列的寬度的總和。

來源

2014-02-05 21:17:49

這不起作用，因爲列數是在報表運行時動態確定的。該表使用使用ajax檢索的數據在javascript中創建。這些數據包含有關列的信息。 –

有很多列的表格中忽略CSS規則

回答

相關問題