div內的表格水平拉伸div超過100％

enter image description here 表格有大量的列（30列），並且每個th標籤都有white-space:nowrap樣式在其上設置。這延伸了父div。如何防止這種情況發生，併爲div分配一個水平滾動條。？div內的表格水平拉伸div超過100％

<style> 
    .monthly_rental_payment_daily th { 
     white-space: nowrap; 
    } 

    .monthly_rental_payment_daily td { 
     white-space: nowrap; 
    } 
</style> 
     <div style="width: 100%;" class="dashboardBox" id="dashboard-monthly-rental-payment"> 

     <div class="dashboardBoxTitle" id="dashboard-monthly-rental-payment-title"> 
      <span>Monthly Rental Payments</span> 
     </div> 
     <div style="height:auto" class="dashboardBoxBody" 
      id="dashboard-monthly-rental-payment-body"> 

     <table 
       class="monthly_rental_payment_daily tablesorter standardTable"> 
     <thead> 
     <tr> 
      <th style="text-align: left;padding-right: 15px">Location</th> 

      <th class="left" style="padding-right: 15px">Total to be paid</th> 

      <th class="left" style="padding-right: 15px">Total paid to date</th> 
      <th style="padding-right: 15px"></th> 

      <th class="left" style="padding-right: 15px">Total still to be paid</th> 
      <th style="padding-right: 15px"></th> 


      <th class="left" style="padding-right: 15px">1st - 7th</th> 
      <th style="padding-right: 15px"></th> 

      <th class="left" style="padding-right: 15px">8th-14th</th> 
      <th style="padding-right: 15px"></th> 

      <th class="left" style="padding-right: 15px">15th-21st</th> 
      <th style="padding-right: 15px"></th> 

      <th class="left" style="padding-right: 15px">22nd+</th> 
      <th style="padding-right: 15px"></th> 



      <th class="left" style="padding-right: 15px">1st - 7th</th> 
      <th style="padding-right: 15px"></th> 

      <th class="left" style="padding-right: 15px">8th-14th</th> 
      <th style="padding-right: 15px"></th> 

      <th class="left" style="padding-right: 15px">15th-21st</th> 
      <th style="padding-right: 15px"></th> 

      <th class="left" style="padding-right: 15px">22nd+</th> 
      <th style="padding-right: 15px"></th> 


      <th class="left" style="padding-right: 15px">1st - 7th</th> 
      <th style="padding-right: 15px"></th> 

      <th class="left" style="padding-right: 15px">8th-14th</th> 
      <th style="padding-right: 15px"></th> 

      <th class="left" style="padding-right: 15px">15th-21st</th> 
      <th style="padding-right: 15px"></th> 

      <th class="left" style="padding-right: 15px">22nd+</th> 
      <th style="padding-right: 15px"></th> 

     </tr> 
     </thead> 
    </table> 
    </div> 
    </div>

來源

2014-06-27 Ravi

其實，我發現了這一切是一個div這是TR的TD內內。如果帶出tr，滾動條就會出現。在tr內部時，無論您是使用div寬度的50％還是100％，這都會簡單地拉伸tr。如果有意義的話，寬度百分比只會減小div的寬度，但不會減小外部tr的寬度。 – Ravi

不同的版本可以在http://jsfiddle.net/rkpolepeddi/d4nc2/3/和http://jsfiddle.net/rkpolepeddi/d4nc2/5/ – Ravi

http://jsfiddle.net/rkpolepeddi/d4nc2/3 /似乎回答你的問題「這怎麼能被阻止，並有一個水平滾動的div？」 – TMS

沒有真正看到你的代碼，我只能猜測。嘗試在div上設置寬度並設置overflow-x以進行滾動。

來源

2014-06-27 18:36:46 dzny

想要發表評論並要求查看代碼，比發佈猜測更好嗎？ – j08691

我已經發布了代碼。這個div在Jquery標籤中。（我提到這個的原因是Jquery選項卡是另一個外部div）。 – Ravi

在你的div中使用樣式overflow: auto或overflow: scroll。在包含表的DIV，也儘量最大寬度設置爲100％，以及這樣的：max-width: 100%

工作小提琴：http://jsfiddle.net/95Xy6/2/

來源

2014-06-27 18:37:12 entropic

我試過兩種。他們都沒有工作。 – Ravi

http://jsfiddle.net/rkpolepeddi/d4nc2/5/。這是JSFIDDLE鏈接。 – Ravi

使用overflow:auto在你的DIV jsfiddle example

來源

2014-06-27 18:43:16 jtorrescr

添加overflow-x:scroll。它會提供滾動效果。

Demo

來源

2014-06-27 18:46:58 Mayank

我試過溢出和東西。似乎沒有任何東西阻止它伸展。 – Ravi

你已經給了父div的寬度100％。所以當表有更多數據時它會滾動。如果你減少它的寬度，它會顯示更多的滾動。 HTTP：//的jsfiddle。net/AuX2Z/2/ – Mayank

要求是滾動條應該在超出頁面寬度之前出現。 – Ravi

好的。首先，我要把你最新的小提琴http://jsfiddle.net/rkpolepeddi/d4nc2/5/。

問題是表格沒有取實際的列寬，而是取列的內容。所以我們需要強制不要根據表列的內容來擴展表格。

我們在這裏有一個選項。這是table-layout CSS屬性。財產會做什麼table-layout:fixed？看看下面的定義。

The horizontal layout only depends on the table's width and the width of the columns, not the contents of the cells

這麼簡單。像下面一樣將table-layout:fixed添加到您的外部單元格。

.outer_table { 
    width:100%;  
    table-layout:fixed; 
}

Updated DEMO

來源

2014-07-09 09:58:53

div內的表格水平拉伸div超過100％

回答

相關問題