HTML和CSS表溢出不起作用

我試圖做一個表與自動溢出，但似乎並沒有工作。HTML和CSS表溢出不起作用

我現在擁有的一切：

<div class="panel-group col-sm-offset-1 col-sm-10"> 
    <div class="panel panel-default"> 
    <div class="panel-heading"> 

     <i class="fa fa-folder-open-o fa-fw"></i> 
     <strong>Chatbox</strong> 

    </div> 

    <div id="forum4" class="panel-collapse collapse in" style="height:248px;">   

     <div class="table-responsive"> 

     <table class="table table-hover" style="overflow:auto;max-height:248px;"> 
      <thead> 
      <tr> 
       <th style="width:5%"></th> 
       <th style="width:81%;"></th> 
       <th style="width:5%;"></th> 
       <th style="width:8%;"></th> 
      </tr> 
      </thead> 
      <tbody> 
       <tr> 
       <td><b>Robin</b></td> 
       <td>Hier komt dan het bericht :D</td> 
       <td class="text-right"><small><a href="#"><i class="fa fa-warning" style="color: #CA2B2B;"></i></a></small></td> 
       <td class="text-right"><small>16 aug 18:51</small></td> 
       </tr> 
      </tbody> 
     </table> 
     </div> 
    </div> 
    </div> 
</div>

這給了我我想要的完美的東西，除非它需要一個溢出。因爲當它需要溢出時，它只是繼續前進，沒有任何溢出。

當我將display:block添加到table時，它確實有溢出（自動），但表格更短（http://prntscr.com/85c09y）。這就是我想要修復的問題，表格看起來像這樣：http://prntscr.com/85c1u6

我想要修復overflox y，not overflow x！

來源

2015-08-16 Robin

請你重現問題的小提琴.. – Lal

http://www.bootply.com/ittoDdbQY7是我現在有，這是我想要的：http：//www.bootply.com/UVy7nJTCyl但是'溢出'，並且當我不添加「isisplay：block」時它不起作用。 – Robin

@RobinR先生，您應該發佈演示，最好在https://fiddle.net或您自己的webspace上。我們至少需要所有這些類中的CSS。內聯樣式可能不是唯一影響你的表格的東西。我會給你一個答案，但請注意，這是完全基於你提供的信息，所以在應用到你的真實表格時它可能不起作用。 – zer00ne

UPDATE： 紅色輪廓是表格，藍色虛線輪廓是包含表格的div，黑色虛線輪廓是佈局的其餘部分。

<div class="panel-group col-sm-offset-1 col-sm-10"> 
    <div class="panel panel-default"> 
    <div class="panel-heading"> 

     <i class="fa fa-folder-open-o fa-fw"></i> 
     <strong>Chatbox</strong> 

    </div> 

    <div id="forum4" class="panel-collapse collapse in" style="height:248px;">   

     <div class="table-responsive" style="display:block;overflow:auto;max-height:248px;"> 

     <table class="table table-hover"> 
      <thead> 
      <tr> 
       <th style="width:5%"></th> 
       <th style="width:82%;"></th> 
       <th style="width:5%;"></th> 
       <th style="width:8%;"></th> 
      </tr> 
      </thead> 
      <tbody> 
       <tr> 
       <td><b>Robin</b></td> 
       <td>Hier komt dan het bericht :D</td> 
       <td class="text-right"><small><a href="#"><i class="fa fa-warning" style="color: #CA2B2B;"></i></a></small></td> 
       <td class="text-right"><small>16 aug 18:51</small></td> 
       </tr> 
      </tbody> 
     </table> 
     </div> 
    </div> 
    </div> 
</div>

修正是上面的代碼。

所需的要站在table-responsive類，而不是table table-hover類

來源

2015-08-16 19:33:11 zer00ne

我想要overflox y被修復，而不是溢出x – Robin

你給我的唯一線索（因爲你不會發布演示），是2張圖片。一張圖像是一個聊天框，比第二張圖片中的另一個聊天框更加水平。這就是overflow-x，你應該比說溢出更具體。在您提供演示之前，我無法幫助您。我花了一些時間準備一個你自己應該做的演示。我甚至投下了票，這只是跛腳。 – zer00ne

有2個演示。你不能只說有沒有演示。你沒有1，但2！我使用的所有東西都只是引導程序的最新版本，我沒有對引導程序的'核心'文件進行任何更改。寬度需要從表格中確定，但也需要溢出（Y）。 – Robin

HTML和CSS表溢出不起作用

回答

相關問題