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

Question

In my app there's an option to add auto-generated tables and I need to make them scroll-able (overflow-x) when the table is wider than the containing parent. My solution works for wider tables, however not for tables that are narrower than the parent, I need them to stretch across the 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 </td>
<td class="ms-rteTableEvenCol-default">dasdasdas</td>
<td class="ms-rteTableOddCol-default"> </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 the 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;
}

Answer 1

I took a look at your CodePen and everything looks fine to me. What I do see happening is that your cells aren't taking up the entire width. The tables (blue borders) are spanning the entire width, but your cells width fit to it's content. if you add the following to you cells
td, th {
width:100%;
}
Your table cells will span to the full width of the table. That being said, maybe you only want the second cell to span to the full width. Then just add a custom class with width: 100%; .