Как я могу отформатировать таблицу начальной загрузки, чтобы выровнять все содержимое по левому краю и использовать только необходимое пространство?

Question

Вот что я пытаюсь достичь:

[ header  ] [ header 2 ] [ header 3      ]
----------------------------------------------------------------------100%
 cell here   and longer   and even longer
----------------------------------------------------------------------100%
 another     row          here
----------------------------------------------------------------------100%

В моем примере выше я хочу таблицу шириной 100%, чтобы строки таблицы с чередованием (т.е. <table class="table table-striped"> растягивали на всю ширину, но мне нужно, чтобы все содержимое было выровнено по левому краю и только занимать необходимое место. Я пробовал различные комбинации:

table.something thead th { width: auto !important }
table.something thead th { white-space: nowrap; width; 1%; }
table.something tbody td { white-space: nowrap; width: 1%; }

Это для спецификации проекта, которой я должен следовать, иначе я бы просто придерживался обычной таблицы начальной загрузки.

Answer 1

Идея состоит в том, чтобы установить table-layout в auto так, чтобы ширина таблицы и ее ячеек корректировалась в соответствии с содержимым. И тогда вы устанавливаете ширину последнего столбца на 100%. Это подтолкнет другие столбцы к сжатию. Наконец, чтобы избежать переноса содержимого в других столбцах, вы можете установить white-space на nowrap.

HTML

<table class="table table-striped">
    <thead>
        <tr>
            <th>[header]</th>
            <th>[header 2]</th>
            <th>[header 3]</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>cell here</td>
            <td>longer cell here</td>
            <td>longer longer and even longer cell here</td>
        </tr>
        <tr>
            <td>cell</td>
            <td>longer cell</td>
            <td>longer longer and even longer cell</td>
        </tr>
        <tr>
            <td>cell here here</td>
            <td>longer cell here here</td>
            <td>longer longer and even longer cell here here</td>
        </tr>
    </tbody>
</table>

CSS

.table {
    table-layout: auto;
}

.table td, .table th {
    white-space: nowrap;
}

.table thead th:last-child {
    width: 100%;
}

Скриншот

демо: https://jsfiddle.net/davidliang2008/bd7g1mxp/20/