spacetab spacetab - 1 month ago 6
CSS Question

Make last td as row

Please take a look at https://jsfiddle.net/wYA9K/55/

<table>
<thead>
<th colspan="1" style="width: 10%">TH1</th>
<th colspan="1" style="width: 60%">TH2</th>
<th colspan="1" style="width: 30%">&nbsp;</th>
<th>&nbsp;</th> <-- what should i do??
</thead>
<tr>
<td colspan="1" style="width: 10%">a</td>
<td colspan="1" style="width: 60%">b</td>
<td colspan="1" style="width: 30%">c</td>
<td>UNDERNEATH SPANNING WHOLE ROW</td> <-- what should i do??
</tr>




I am trying to make the last td to expand the whole row.
Is there anyway possible to do this?

Answer

If you want the last column of each row to appear, and you're willing to include explicit styles on all of the other columns, you can float them:

td, th {
  display: block;
  float: left;

  /* for visibility only */
  border: 1px solid grey;

  /* so we don't run out of space with 100% total width */
  box-sizing: border-box;
}

td:last-child, th:last-child {
  width: 100%;
}
<table>
  <thead>
    <tr>
      <th colspan="1" style="width: 10%">TH1</th>
      <th colspan="1" style="width: 60%">TH2</th>
      <th colspan="1" style="width: 30%">&nbsp;</th>
      <th>&nbsp;</th>
    </tr>
  </thead>
  <tr>
    <td colspan="1" style="width: 10%">a</td>
    <td colspan="1" style="width: 60%">b</td>
    <td colspan="1" style="width: 30%">c</td>
    <td>UNDERNEATH SPANNING WHOLE ROW</td>
  </tr>
  <tr>
    <td colspan="1" style="width: 10%">a</td>
    <td colspan="1" style="width: 60%">b</td>
    <td colspan="1" style="width: 30%">c</td>
    <td>UNDERNEATH SPANNING WHOLE ROW</td>
  </tr>
</table>

Comments