How do I get the rightmost column to fill the remaining space?

Question

Say I have a table with only three small columns. It looks untidy and unbalanced to have a narrow, tall table hugging the left side of my screen (example), so I'd like the table to cover the width of the page. However, when I set the table width to 100%, all the columns are stretched out as well, so now my data is spread thinly across the screen, which also looks untidy (example).

What I'm looking for is a solution where all the columns have the same size as they would have had if the table was width: auto, but the final column fills the remaining space on the screen. This is what Spotify does, for example:

The "User" column will cover the remaining width, no matter what. Is there a relatively simple way of achieving this with HTML tables and CSS?

Answer 1

I have found a simple solution:

table td:last-child {     width: 100%; } 

Result:

body {      font: 12px "Sans serif";  }    table {      width: 100%;        background-color: #222222;      color: white;      border-collapse: collapse;  }    table th {      padding: 10px;      text-align: left;  }    table td {      padding: 2px 10px;  }    table td:last-child {      width: 100%;  }    table td:nth-child(odd), table th:nth-child(odd) {      background-color: rgba(255, 255, 255, 0.05);  }    table tr:nth-child(even) {      background-color: rgba(255, 255, 255, 0.05);  }    table tr:last-child td {      padding-bottom: 10px;  }

<table>      <tr>          <th>Product</th>          <th>Cardinality</th>          <th>Price per item</th>      </tr>      <tr>          <td>Apple</td>          <td>5</td>          <td>$2</td>      </tr>      <tr>          <td>Pear</td>          <td>3</td>          <td>$3</td>      </tr>      <tr>          <td>Sausage</td>          <td>10</td>          <td>$0.5</td>      </tr>      <tr>          <td>Pineapple</td>          <td>2</td>          <td>$8</td>      </tr>      <tr>          <td>Tomato</td>          <td>5</td>          <td>$1</td>      </tr>      <tr>          <td>Lightsaber</td>          <td>2</td>          <td>$99 999</td>      </tr>  </table>

This appears to work in my current scenario, but it looks like something that can cause unwanted side effects in other situations. If I stumble across any, I'll edit this answer.

Possible side effects

• Multi-word table cells will be wrapped into multiple lines to keep the column as narrow as possible. One solution is to use white-space: nowrap on the table cells, but that will hinder cells with lots of text from wrapping when they should.