Как сверстать таблицу (3 колонки, средняя — фиксированной ширины)?

Question

[Metalbrother]

Есть таблица с тремя колонками:

<table>
    <tr>
        <td class="c1"><td>
        <td class="c2"><td>
        <td class="c3"><td>
    </tr>
</table>

codepen.io/anon/pen/sDFwt

c2 - фиксированной ширины (120px);
c1 и c3 - должны быть одинаковой ширины, не зависимо от их содержимого.

Как можно этого добиться?

Answer 1

[Денис]

В свойство table нужно добавить строчку "table-layout: fixed".

Comments

[vdem]

Я пробовал, все равно если в первом столбце есть контент, а в третьем - нету, то первый столбец чуть расширяется (немного, на несколько пикселей).

[vdem]

Убрал width="50%" и все ок.

Answer 2

[sergealmazov]

Если отказаться от таблицы в пользу с display: table, display:table-row, display-table-cell

Comments

[Metalbrother]

Не понимаю, как это поможет. Можете пояснить?

[vdem]

Если нужно выводить табличные данные, то логично использовать именно таблицы, а не извращаться с CSS. Иначе это ничем не лучше, чем использовать таблицы для верстки лэйаута.

Answer 3

[vdem]

<table>
    <col width="50%" />
    <col width="120" style="min-width: 120px;" />
    <col width="50%" />
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</table>

UPD: Хм, работает, да не совсем. Но рыть нужно где-то здесь.
UPD2:

<table style="table-layout: fixed; width: 100%;">
    <col/>
    <col style="width: 120px;" />
    <col/>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</table>