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

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>