JSFiddle - React, Tailwind, and code Playground

by dhaupin

HTML

<p>
Reduce the width of this pane. Image column will be hidden by css at width 480px or less. How do we use CSS to make colspan 3 on the row totals when this happens?
</p>
<table>
<thead>
  <tr>
    <td class="image">Image</td>
    <td>Name</td>
    <td>Model</td>
    <td>Qty</td>
    <td>Price</td>
  </tr>
</thead>
<tbody>
  <tr>
    <td class="image">-- img --</td>
    <td>This Red Hat</td>
    <td>HAT-RED-2384</td>
    <td>2</td>
    <td>$13.22</td>
  </tr>
  <tr>
    <td class="total right" colspan="4">Subtotal:</td>
    <td>$26.44</td>
  </tr>
  <tr>
    <td class="total right" colspan="4">Shipping:</td>
    <td>$6.65</td>
  </tr>
  <tr>
    <td class="total right" colspan="4">Total:</td>
    <td>$33.10</td>
  </tr>
</tbody>
</table>

CSS

table {
  border-collapse: collapse;
}
td {
  border: 1px solid grey;
  padding: 4px;
}
.right {
  text-align: right;
}

@media (max-width: 480px) {
  td.image {
    display: none;
  }
  td.total {
    /* colspan 3 here? how do we make it span cleanly? */
  }
}