Colspan messes с таблицей с фиксированной шириной

Я хочу таблицу с фиксированной шириной с 1 маленьким и двумя большими столбцами:

|..|....|....|
|..|....|....|
|..|....|....|

используя

td.small { width: 20% }
td.large { width: 40% }

Затем я хочу добавить дополнительный большой col с colspan = 2, подобный

|.......|....|
|..|....|....|
|..|....|....|

используя

td.small { width: 20% }
td.large { width: 40% }
td.extralarge { width: 60% } /* 20+40=60 */

Но я продолжаю:

|.......|....|
|...|...|....|
|...|...|....|

Более графический пример находится на jsbin

js-bin screenshot

** изменить **

Извините, я пропустил одну деталь: Я должен использовать (или так я думаю..?) table-layout: fixed, так как у меня есть некоторые особые переполняющие свойства ячеек:

td {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

Обновлен jsbin, найденный здесь.

Ответы

Ответ 1

Вы также можете использовать colgroup и col, чтобы установить ширину:

<table>
    <colgroup>
        <col class="short" />
        <col span="2" class="long" />
    </colgroup>
    <tr>
        <td>Short</td>
        <td>Long long long long</td>
        <td>Long long long long</td>
    </tr>
    <tr>
        <td>Short</td>
        <td>Long long long long</td>
        <td>Long long long long</td>
    </tr>
    <tr>
        <td>Short</td>
        <td>Long long long long</td>
        <td>Long long long long</td>
    </tr>
</table>

С этим CSS: 

table { width: 100%; }
.short {
    background: lightblue;
    width: 20%
}
.long {
    background: lightgreen;
    width: 40%;
}
.multiCells { background: #F3A633; }

Таким образом, вам не нужно давать каждому td класс, это упрощает, когда вы хотите изменить имя класса.

Демонстрация JSFiddle

Colgroup MDN Статья

Ответ 2

измените таблицу-макет: зафиксировано на авто

table {
  table-layout: auto;
}

Найдите рабочую демонстрацию здесь: http://jsbin.com/atohug/2/edit

Ответ 3

LinkinTED предоставил работоспособное решение, но этот пример напрямую не решает проблему OP и не объясняет, почему он работает. Пример должен выглядеть следующим образом (заимствуя тот же синтаксис)

<table>
    <colgroup>
        <col class="short" />
        <col span="2" class="long" />
    </colgroup>
    <tr>
        <td colspan=2>Extra long content</td>
        <td>Long long long long</td>
    </tr>
    <tr>
        <td>Short</td>
        <td>Long long long long</td>
        <td>Long long long long</td>
    </tr>
</table>

Проблема OP заключалась в том, что при использовании макета таблицы: исправлено, таблица ожидает, что каждая ширина ячейки будет четко определена в первой строке, поэтому ей не нужно изменять размер столбцов, поскольку в последующие ячейки добавляется больше содержимого строк. Однако, если вы используете colspan = 2 в первой строке, он не имеет представления о ширине этих двух ячеек, поэтому по умолчанию он составляет 50% их общей ширины, и это решение является фиксированным для остальной части таблицы. Используя colgroup и указав ширину для каждого столбца, таблица может фиксировать ширину столбцов заранее, и вы можете использовать colspan = 2 (или более) в первой строке.

Одно предостережение. col width = поддерживает только пиксели и%. Если вам нужно использовать другие единицы измерения ширины, свяжите col со стилем, как указано выше.

Ответ 4

Я знаю, что этот пост действительно старый, но, возможно, мое решение кому-нибудь поможет. Вы можете создать фиктивную строку сверху и скрыть ее, установив для каждой высоты ячейки значение 0. Это поможет фиксированному макету таблицы рассчитать желаемые размеры ячеек.

<table>
<tr class="hidden-row">
    <td>Short</td>
    <td>Long long long long</td>
    <td>Long long long long</td>
</tr>
<tr>
    <td colspan=2>Extra long content</td>
    <td>Long long long long</td>
</tr>
<tr>
    <td>Short</td>
    <td>Long long long long</td>
    <td>Long long long long</td>
</tr>


tr.hidden-row td {
    height: 0;
}