Размер столбца таблицы с использованием colspan

Question

Мне удалось добиться своего намеченного дизайна, но это похоже на взлом.

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

http://jsfiddle.net/nooorz24/cea57mhd/4/

table {
    width: 100%;
}

table td {
    border: 1px solid black;
}

<table>
    <tr>
        <td style="width: 1px;"></td>
        <td style="width: 10000px;"></td>
        <td style="width: 1px;"></td>
        <td style="width: 10000px;"></td>
    </tr>
    <tr>
        <td style="width: 1px;">IMG</td>
        <td style="width: 10000px;" colspan="2">Description text</td>
        <td></td>
    </tr>
    <tr>
        <td colspan="2"></td>
        <td style="width: 1px;">IMG</td>
        <td style="width: 10000px;">Description text</td>
    </tr>
</table>

Насколько я понимаю, это потому, что я пытаюсь установить ширину для ячейки с colspan = "2", а html не понимает, как с этим работать.

Можно ли решить эту проблему без добавления дополнительной строки?

Answer 1

Вы можете использовать элемент HTML col, предназначенный именно для этого: стилизация или определение общих атрибутов для всего столбца.

table {
  width: 100%;
}

table td {
  border: 1px solid black;
}

<table>
  <colgroup>
    <col style="width: 1px">
    <col style="width: 10000px;">
    <col style="width: 1px">
    <col style="width: 10000px;">
  </colgroup>
  <tr>
    <td>IMG</td>
    <td colspan="2">Description text</td>
    <td></td>
  </tr>
  <tr>
    <td colspan="2"></td>
    <td>IMG</td>
    <td>Description text</td>
  </tr>
</table>