Table within a table that ignores parent tables column restrictions - html

Question

Is it possible to nest a table inside of an existing table, but have the nested table be unrestricted by the parent table's column widths?
In other words, I want to fit a completely independent table inside a row of an existing table. The child table should not have to abide by the parent table's column widths.

Answer 1

Use the colspan attribute to make a cell span multiple columns. You can put the nested table in such a cell. Here's an example of a table of orders that contains order details as a nested table in the following row:
table {
border-collapse: collapse;
font-family: sans-serif;
font-size: 12px;
}
td, th {
text-align: left;
padding: 3px 5px;
border: 1px solid #ccc;
}
<table>
<thead>
<tr>
<th>Order #</th>
<th>Date</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>100781</td>
<td>5/30/2015</td>
<td>$71.00</td>
</tr>
<tr>
<td colspan="3">
Order detail:
<table>
<thead>
<tr>
<th>Name</th>
<th>Price</th>
<th>Quantity</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mixed Greens Salad</td>
<td>$7.00</td>
<td>2</td>
<td>$14.00</td>
</tr>
<tr>
<td>Steak</td>
<td>$22.00</td>
<td>1</td>
<td>$22.00</td>
</tr>
<tr>
<td>Salmon</td>
<td>$19.00</td>
<td>1</td>
<td>$19.00</td>
</tr>
<tr>
<td>Chocolate Cake</td>
<td>$8.00</td>
<td>2</td>
<td>$16.00</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>