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
Post a Comment