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

Question

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

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

Answer 1

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

＆＃13;

＆＃13;

table {
  border-collapse: collapse;
  font-family: sans-serif;
  font-size: 12px;
}
td, th {
  text-align: left;
  padding: 3px 5px;
  border: 1px solid #ccc;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;