Строки таблицы HTML - Как сделать так, чтобы уникальная ячейка имела ширину 100%? (с объяснением скриншота)

Question

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

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

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

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

Answer 1

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

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

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

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

Answer 2

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

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