HTML and CSS table overflow not working -


i'm trying make table auto overflow, doesn't seem work.

what have now:

<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> 

that gives me perfect thing want, except when needs overflow. because when needs overflow, keeps going, without overflow.

when add display:block table have overflow (auto) table shorter (http://prntscr.com/85c09y). problem want fixed, table looks this: http://prntscr.com/85c1u6

i want have overflox y fixed, not overflow x!

update: red outline table, blue dashed outline div containing table, , black dotted outline rest of layout.

    <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> 

fix code above.

the style="display:block;overflow:auto;max-height:248px;" needed standing in table-responsive class, not table table-hover class


Comments

Popular posts from this blog

php - Admin SDK -- get information about the group -

dns - How To Use Custom Nameserver On Free Cloudflare? -

Python Error - TypeError: input expected at most 1 arguments, got 3 -