Как получить крайний правый столбец для заполнения оставшегося пространства?

Скажем, у меня есть таблица с тремя небольшими столбцами. Он выглядит неопрятным и неуравновешенным, чтобы иметь узкий высокий стол, обнимающий левую часть экрана (пример), поэтому я хотел бы, чтобы таблица закройте ширину страницы. Однако, когда я устанавливаю ширину таблицы на 100%, все столбцы также растянуты, так что теперь мои данные распределены по всему экрану, что также выглядит неопрятным (пример).

То, что я ищу, - это решение, в котором все столбцы имеют тот же размер, что и у них, если бы таблица была width: auto, но последний столбец заполняет оставшееся пространство на экране. Это то, что делает Spotify, например:

Столбец "Пользователь" будет охватывать оставшуюся ширину, несмотря ни на что. Существует ли относительно простой способ достижения этого с помощью таблиц HTML и CSS?

Ответ 1

Я нашел простое решение:

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

Результат:

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>

Ответ 2

Если это то, что вы имели в виду: образ то я могу добиться этого, используя стандартную структуру таблицы html со следующим css:

table {
  width:auto;
}
td {
  white-space:nowrap;
}
td:last-child {
  width:100%;
}

- EDIT: работать с вашим jsfiddle

Ответ 3

Установите ширину таблицы до 100%. Установите ширину на всех, кроме самого правого столбца. Крайний правый столбец будет расширяться, чтобы заполнить доступное пространство.