Строки таблицы HTML. Как создать уникальную ячейку со 100% шириной? (с описанием скриншотов)

Вот моя проблема: у меня есть HTML-таблица, которая выглядит так:

HTML Table

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

table

Как вы можете видеть, я добавил еще одну строку таблицы под ней с одной ячейкой <td> внутри, содержащей текст. Однако я хочу, чтобы эта ячейка занимала 100% ширины всей таблицы - она не должна изменять размер столбца "Имя".

Это возможно? Я счастлив использовать jQuery или Javascript, если это необходимо - также, это не должно работать в IE, так как каждый пользователь использует Chrome (хотя это было бы перком).

Ответы

Ответ 1

В вашем случае вы сделаете что-то вроде

<tr>
  <td colspan="5">This text should be as long as the entire table width...</td>
</tr>

Атрибут colspan указывает, сколько столбцов должно занимать ячейка. Он должен работать во всех браузерах, поддерживающих таблицы, как стандартный HTML.

В JavaScript вы должны установить свойство colspan ячейки или вызвать .setAttribute("colspan", the_number_of_columns) на нем. Либо надо работать. Но если вы не генерируете ячейку динамически, вы должны просто включить атрибут colspan в свой HTML.

Ответ 2

Для одной ячейки, чтобы охватить все 5 столбцов,

<td colspan="5">Lorem Ipsum</td>