自動錶格佈局和colspan

我創建了一個應用程序，允許用戶通過添加和刪除列和行，設置列寬和單元格集以及將元素插入表格單元格來操作表格結構。在進行測試時，我遇到了一個場景，其中Firefox 4和Internet Explorer 8以我希望呈現的方式渲染表格，而Google Chrome 11則不渲染。我使用table-layout：auto，我知道CSS並沒有指定在這種情況下使用的渲染算法（http://www.w3.org/TR/CSS21/tables.html，第17.5.2.2節）。儘管如此，如果可能的話，我希望在三種瀏覽器中有一致的觀點。自動錶格佈局和colspan

這裏是一個非常簡單的場景來說明不同的渲染（嘗試在Chrome和Firefox/IE就可以看到區別）：http://jsbin.com/ayuja4/3

即使表是足夠寬以包含藍格（因爲第一列設置爲200像素，第二列雖然寬度爲100像素，但必須擴展至300像素以包含綠色div），在Chrome中，第一列的寬度超過了200像素。這會在最後一行產生額外的不必要的空間，這正是我試圖避免的。

任何讓Chrome瀏覽器看起來與Firefox和Internet Explorer中的表相同的想法？我不需要純粹的HTML/CSS方法 - 使用JavaScript處理表格是一個有效的選擇，如果它解決了我的問題。我已經在考慮使用固定表格佈局，但是這會導致處理比列更寬的元素的額外工作，所以這是最後的手段。

來源

2011-05-13 rbarni

似乎是Chrome中的一個錯誤，即使IE 6正確。報告錯誤，他們會很好地修復它，Chrome用戶將得到一個自動更新（除非您不連接到互聯網，否則無法避免），並且您的工作已經完成。 – RobG 2011-05-13 01:56:22

我通過Chrome的錯誤報告功能報告了它。不幸的是，這意味着我不會收到任何反饋。 – rbarni 2011-05-13 15:06:21

如果您將表格中的div顯示爲帶有table div {display:table-cell;}的單元格，則會得到相同的結果。此外，您現在正在做的事情是留下1px的空白，因爲500px元素沒有將1px邊框計算在其中。

我真的再看看它，如果你使用min-width而不是width它也會這樣。

來源

2011-05-13 03:34:21 iamnotoriginal

如果我將「display：table-cell」應用於表格中的所有div，則第一列將擴展超出其預期的200 px，並且第二列的寬度將變得小於300 px，因此綠色div的內嵌寬度（300 px ）不受尊重（演示：http://jsbin.com/ayuja4/5）。這發生在Chrome和Internet Explorer中。在Firefox中，列寬度爲200和100像素，因此div都不受其寬度的限制。 – rbarni 2011-05-13 14:21:36

如果我應用最小寬度而不是寬度，Chrome仍然無法正確顯示，Firefox和Internet Explorer呈現的表格完全像使用寬度而不是最小寬度一樣（demo：http://jsbin.com/ ayuja4/6）。但是，如果我只將「display：table-cell」應用於藍色div，則所有三個瀏覽器都會按照我的預期渲染表格（演示：http://jsbin.com/ayuja4/7），因此這是一個令人滿意的解決方案。感謝您的回答！ – rbarni 2011-05-13 14:28:04

對不起，我不清楚。我的意思是，如果你將'min-width'應用到''那你也應該修復它（http://jsfiddle.net/MKGwe/](http://jsfiddle.net/MKGwe/））。儘管我的解釋不好，但很高興其中一人工作，哈哈！ – iamnotoriginal 2011-05-13 19:20:11

自動錶格佈局和colspan

回答

相關問題