html - table in div goes outside of container in responsive mode -
i have table inside of div. in responsive mode, table goes outside of div area , looks this:
i trying have table move center in responsive mode. i want this:
currently, when screen width gets small, table not close enough left fit in container. not want table go outside of container.
does know how can accomplish this?
.slice-table { vertical-align: middle; display: block; cursor: pointer; cursor: hand; } .inner { width: 50%; margin: 0 auto; font-size: 6px; color: #ffffff; } .spacer-20 { font-size: 0; height: 20px; line-height: 0; }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mtjoasx8j1au+a5wdvnpi2lkffwweaa8hdddjzlplegxhjvme1fgjwpgmkzs7" crossorigin="anonymous"> <div class="st-container"> <div class="st-content" id="content"> <div class="st-content-inner"> <div class="container-fluid"> <div class="row"> <div class="col-md-7"> <div class="panel panel-default"> <div class="panel-body"> <!-- progress table --> <div> <div class="inner"> <table id="table_01" width="401" height="400" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="401" height="400" align="center" valign="middle" bgcolor="#75904a">cell 1</td> </tr> </table> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div>
how adding
overflow-x: auto;
to div.inner element. altough i´m not sure if want. css
.inner { width: 50%; margin: 0 auto; font-size: 6px; color: #ffffff; overflow-x: auto; // when table exceeds size of container, container creates scrollbar. }
i took liberty of adding second cell demostrations sake.
.slice-table { vertical-align: middle; display: block; cursor: pointer; cursor: hand; } .inner { width: 50%; margin: 0 auto; font-size: 6px; color: #ffffff; overflow-x: auto; } .spacer-20 { font-size: 0; height: 20px; line-height: 0; }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mtjoasx8j1au+a5wdvnpi2lkffwweaa8hdddjzlplegxhjvme1fgjwpgmkzs7" crossorigin="anonymous"> <div class="st-container"> <div class="st-content" id="content"> <div class="st-content-inner"> <div class="container-fluid"> <div class="row"> <div class="col-md-7"> <div class="panel panel-default"> <div class="panel-body"> <!-- progress table --> <div> <div class="inner"> <table id="table_01" width="401" height="400" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="401" height="400" align="center" valign="middle" bgcolor="#75904a">cell 1</td> <td width="401" height="400" align="center" valign="middle" bgcolor="red">cell 2</td> </tr> </table> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div>
Comments
Post a Comment