html - 忽略父表列限制的表中表

Question

是否可以在现有表格中嵌套表格，但嵌套表格不受父表格列宽的限制？

换句话说，我想在现有表格的一行中放置一个完全独立的表格。子表不必遵守父表的列宽。

Answer 1

使用 colspan 属性使单元格跨越多列。您可以将嵌套表格放在这样的单元格中。下面是一个订单表的示例，其中包含订单详细信息作为下一行中的嵌套表:

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>