css - HTML wide tables should scroll, narrow tables should stretch to fill parent -


in app there's option add auto-generated tables , need make them scroll-able (overflow-x) when table wider containing parent. solution works wider tables, not tables narrower parent, need them stretch across parent container. codepen here.

html:

<div id="parent">     <table cellspacing="0" width="100%" class="scroll">         <tbody>             <tr class="ms-rtetableheaderrow-default">                 <th rowspan="1" colspan="3">dasdasdas</th>                 <th rowspan="1" colspan="3">dasdasdas</th>                 <th rowspan="1" colspan="3">dasdasdas</th>                 <th rowspan="1" colspan="3">​dasdasdas</th>                 <th rowspan="1" colspan="3">​dasdasdas</th>                 <th rowspan="1" colspan="3">​dasdasdas</th>                 <th rowspan="1" colspan="3">​dasdasdas</th>             </tr>             <tr class="ms-rtetableoddrow-default">                 <th class="ms-rtetablefirstcol-default" rowspan="1" colspan="1">​dasdasdas<br>dasdasdas<br>dasdasdas</th>                 <td class="ms-rtetableoddcol-default">dasdasdas dasdasdas&nbsp;</td>                 <td class="ms-rtetableevencol-default">dasdasdas</td>                 <td class="ms-rtetableoddcol-default">&nbsp;</td>              </tr>             <tr class="ms-rtetableevenrow-default">                 <th class="ms-rtetablefirstcol-default" rowspan="1" colspan="4">​dasdasdas</th>                 <td class="ms-rtetableoddcol-default">​dasdasdas</td>                 <td class="ms-rtetableevencol-default">​dasdasdas</td>                  <td class="ms-rtetableevencol-default">​dasdasdas</td>             </tr>             <tr class="ms-rtetableoddrow-default">                 <th class="ms-rtetablefirstcol-default" rowspan="1" colspan="1">​dasdasdas</th>                 <td class="ms-rtetableoddcol-default">​dasdasdas<br>dasdasdas</td>                 <td class="ms-rtetableevencol-default">​dasdasdas<br>dasdasdas</td>              </tr>             <tr class="ms-rtetablefooterrow-default">                 <th class="ms-rtetablefooterfirstcol-default" rowspan="1" colspan="4">dasdasdas</th>                 <td class="ms-rtetablefooteroddcol-default" rowspan="1">dasdasdas</td>                 <td class="ms-rtetablefooterevencol-default" rowspan="1">dasdasdas</td>                 <td class="ms-rtetablefooteroddcol-default" rowspan="1">dasdasdas</td>                 <td class="ms-rtetablefooterevencol-default" rowspan="1">dasdasdas</td>                 <td class="ms-rtetablefooteroddcol-default" rowspan="1">dasdasdas</td>                 <td class="ms-rtetablefooterevencol-default" rowspan="1">dasdasdas</td>             </tr>         </tbody>     </table>   <table cellspacing="0" width="100%" class="ms-rtetable-default scroll" style="font-size:1em">      <tbody>         <tr>             <th rowspan="1" colspan="1">title 1</th>             <th  rowspan="1" colspan="1">this table should span across parent</th>         </tr>         <tr>             <th rowspan="1" colspan="1">content</th>             <td >contentcontentcontentcontentcontentcontentcontentcontentcontentcontent</td>         </tr>     </tbody> </table> </div>

css:

td,th{   border:1px solid black; } #parent{   width: 700px; } table{   border:1px solid blue;    padding: 10px;  } .scroll{   display: block;     overflow-x: auto; }  tr {     display: table-row;     vertical-align: inherit;     border-color: inherit; } tbody {     display: table-row-group;     vertical-align: middle;     border-color: inherit; }

i took @ codepen , looks fine me. see happening cells aren't taking entire width. tables (blue borders) spanning entire width, cells width fit it's content. if add following cells 

td, th {     width:100%; }

your table cells span full width of table. being said, maybe want second cell span full width. add custom class width: 100%; .


Comments

Post a Comment

Popular posts from this blog

PHP and MySQL WP -

i trying accomplish 2 things here code. writing php directly wp page using insert php plugin. 1) query mysql database , return results 1 column 4 columns. 2) make each result own hyperlink directs user new wp page runs new query on page. i able query show results , turn results dynamic hyperlink, cannot formatting down. right returns result 1 column. here have: [insert_php] $servername = "localhost"; $username = "login"; //edited privacy $password = "password"; //edited privacy $database = "database"; //edited privacy // create connection $conn = new mysqli($servername, $username, $password, $database); // check connection if ($conn->connect_error) { die("connection failed: " . $conn->connect_error); } echo "connected successfully"; //get results database $result = mysqli_query($conn,"select mine mines order mine"); $all_property = array(); //declare array saving property //showing proper...
Read more

android - InAppBilling registering BroadcastReceiver in AndroidManifest -

i'm implementing inapp billing in android app. works well, however, i'm trying decouple broadcast receiver activity manifest. suggestion in android's trivialdrive sample: // important: dynamically register broadcast messages updated purchases. // register receiver here instead of <receiver> in manifest // because call getpurchases() @ startup, therefore can ignore // broadcasts sent while app isn't running. // note: registering listener in activity bad idea, done here // because sample. regardless, receiver must registered after // iabhelper setup, before first call getpurchases(). currently there's class extends broadcastreceiver : public class iabbroadcastreceiver extends broadcastreceiver { /** * intent action receiver should filter for. */ public static final string action = "com.android.vending.billing.purchases_updated"; private final iabbroadcastlistener mlistener; public iabbroadcastreceiver(iabbroadcastlistener listener) { m...
Read more

go - golang pprof for c library code -

i have been trying profile golang application pprof, seems details of c code(linked static library) missed in output result. flame graph from frame graph can see c code time consuming reported within "runtime._externalcode", no details @ all. , sure static library compiled debug enable. so there way make pprof details(like stack trace) of 3rd party c code? or there other golang profiling tool this?
Read more