Is there a way to make tables within a div have relative widths to each other? For example, if one table has a large image or long word causing it to extend to 100%, how can we ensure that the other tables in the same div also adjust to 100% width?
CSS
.outer {
border: solid 3px green;
width: 100%;
display: block;
}
table {
border: solid 1px red;
width: 100%;
}
.label {
border: solid 3px red;
width: 20%;
}
HTML
<div class="outer">
<table >
<tr>
<td class="label">
Label 01
</td>
<td>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq s
</td>
</tr>
<tr>
<td class="label">
Label 02
</td>
<td>
meworks & Extensionsotools More 1.3.1 (compat)
ART 0.8.7 PowerTools 1.0.5 Fiddle Options External Resources
Languages Results Ajax RequestsLegal, Credits and Links
</td>
</tr>
</table>
</div>
Check out my Demo