html - 如何只换行表格的一列

Question

我有一个包含 5 列的表格，其中第 5 列包含“添加到购物车”按钮。当缩小到移动设备时，第 5 列被截断。我怎样才能让第 5 列最终位于下方？代码如下

<td class="align-product-header text-medium">{{ fulfillmentOption.quantity | number: '2.'}} </td>
<td class="align-product-header text-blue text-medium">{{ computeShipDate(fulfillmentOption) }}</td>
<td class="align-product-header">{{fulfillmentOption.pricePerUnit | currency:'USD':true:'1.4-4' }}</td>
<td class="align-product-header text-green text-medium">{{ fulfillmentOption.totalPrice | currency:'USD' }}</td>
<td class="align-product-header" style="width: 150px">
   <button class="btn btn-primary btn-block btn-sm m-0 bg-warning" data-toast data-toast-type="success" (click)="addPartToCart(fulfillmentOption)">Add to Cart</button>
</td>```

Answer 1

您可以重置最后一个 td 的表格显示。

如果你有不止一行，那么 tr display 也将被重置:

例子

tr {
  /* if more than one tr involved */
  display: table;
  margin-bottom: 2px;
}

tr td:last-child {
  display: table-caption;
  caption-side: bottom;
  width: 100%;
}


/* demo styling , use yours */

table,
tr {
  width: 100%;
  border-collapse: collapse
}

td {
  border: solid 1px;
  text-align: center;
  background: lightblue;
}

tr td:last-child {
  background: lightgreen;
}

* {
  box-sizing: border-box;
  margin:0;
}

<table><!--td html attributes remove for clarity -->
  <tr>
    <td> fulfillmentOption.quantity </td>
    <td>computeShipDate</td>
    <td>fulfillmentOption.pricePerUnit </td>
    <td> fulfillmentOption.totalPrice </td>
    <td>
      <button>Add to Cart</button>
    </td>
  </tr>
  <tr>
    <td> fulfillmentOption.quantity </td>
    <td>computeShipDate</td>
    <td>fulfillmentOption.pricePerUnit </td>
    <td> fulfillmentOption.totalPrice </td>
    <td>
      <button>Add to Cart</button>
    </td>
  </tr>
</table>

您可以在任何时候切换布局时使用 mediaquery 来触发。