忽略父表列限制的表中的表 [英] Table within a table that ignores parent tables column restrictions

问题描述

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

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.

推荐答案

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

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>

这篇关于忽略父表列限制的表中的表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！