How to get only one column of a table to wrap - html

Question

I have a 5 column table, where the 5th column contains the "add to cart" button. When shrinking down to mobile, the 5th column gets cut off. How can I make only that 5th column end up underneath? Code below
<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

You may reset the table-display of that last td.
If you have more than one row, then tr display is to be reset too :
example
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>
You may use mediaquery to trigger this any time you which to switch layout.