表格寬度超出div邊界

我有表格中的div。如果我用IE9或FF查看它，那就沒問題。但如果我在IE8中查看它，表格會超出div邊界。有任何想法嗎？表格寬度超出div邊界

<div> 
    <table width="100%" > 
    <tr> 
     <td> 
     </td> 
    </tr> 
    </table> 
</div>

來源

2010-11-21 user384080

@user對不起，我沒CEE，你已經給了寬度爲100％ – kobe 2010-11-21 23:16:21

@can您發佈數據的完整的HTML，我覺得文字可能是超越，嘗試溢出 – kobe 2010-11-21 23:23:22

繼續滾動以找到最高位置的答案：'table-layout：fixed' – timmyc 2017-08-07 19:55:03

發現這裏的解決方案：

http://www.456bereastreet.com/archive/200704/how_to_prevent_html_tables_from_becoming_too_wide/

訣竅是使用CSS屬性table-layout。它可能需要三個值：auto，fixed和inherit。正常（初始）值爲自動，這意味着表格寬度由其列和任何邊框給出。換句話說，如果需要的話，它會擴大。

你想要使用的是table-layout:fixed。巴姆！現在表格的寬度爲，因爲您已經在CSS中指定了寬度。沒有更多，不少。對我的非常驚喜，這似乎得到了瀏覽器的廣泛支持。唯一不支持它的意義的瀏覽器是IE/Mac，並且該瀏覽器的重要性正在迅速逼近零。

接下來決定如何處理不適合表的內容。如果表格僅包含文字，則換行：斷字（文字換行在CSS3文字效果模塊中指定）將強制瀏覽器根據需要中斷單詞以防止溢出。

來源

2010-11-21 23:47:03 user384080

這個話題很古老，但我會添加一些東西來幫助未來的讀者。不要忘記說'table-layout：fixed'會強制列具有相同的寬度。所以如果你使用這個技巧，你必須按照你喜歡的方式再次強制（設置）你桌子上的每一列。 – stfsngue 2016-09-28 14:26:25

將表格寬度設爲100％，這樣它將佔據div並且不會穿過它。

來源

2010-11-21 23:15:46 kobe

因此，它使滾動條當表擴大太多，你可以設置它，它自己的DIV與overflow: scroll;內...

來源

2010-11-21 23:15:58

我使用了overflow-x：auto，所以我只在水平滾動條過寬時纔會得到水平滾動條。這非常適合我的設計。 – Chris 2016-02-22 03:30:32

檢查什麼箱尺寸是默認瀏覽器設置。

box-sizing: content-box;是指：

指定的寬度和高度分別適用到的寬度和高度的元素的內容框的。元素的填充和邊框在此區域外繪製爲。

box-sizing: border-box;表示：

指定的寬度和高度確定元素的邊框。在元素上指定的任何填充或邊框在其餘區域內繪製爲。內容框是通過從指定的寬度和高度中減去填充或邊框寬度各邊來計算的。

它只是一個改變box-sizing值的問題。這裏有一篇關於它的文章：http://ie8demo.com/BoxSizing.aspx

來源

2010-11-21 23:23:37

你在div上設置了寬度嗎？如果是這樣，它將堅持其寬度，允許表重疊。嘗試刪除寬度，它將展開到其容器的寬度。如果你想讓div適合桌子大小，你可以漂浮它。

來源

2010-11-21 23:45:38 Ray

將樣式display:table添加到div標籤。這會導致元素像表格一樣工作。

來源

2013-12-27 17:25:25 ram

作爲用戶384080 mentioned，應該添加table-layout:fixed。但是，只有table-layout並不總是解決問題。請確保您添加width屬性，以及：

<table style="width:100%;table-layout:fixed">

來源

2017-04-05 19:07:48

表格寬度超出div邊界

回答

相關問題