Как получить только один столбец таблицы для переноса - PullRequest
Новая
       9

Как получить только один столбец таблицы для переноса

0 голосов
/ 04 октября 2019

У меня есть таблица из 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>```

1 Ответ

0 голосов
/ 04 октября 2019

Вы можете сбросить табличное отображение этого последнего 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>

Вы можете использовать медиазапрос, чтобы вызвать это в любой момент, когда вам нужно переключить макет.

...