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％

回答

相关问题