Как сделать макет строки игнорировать предыдущий ряд

Question

У меня есть ряд, чей последний td элемент должен занимать 50% ширины в строке и:

Take a look at column 3.

Однако, я также нужна td в первом чтобы заполнить всю строку. Когда я установить ее ширину до 100%, это влияет на вторую строку:

Now look what happened!

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

Браузер: Google Chrome.

Примечание: К сожалению, использование дивы вместо таблиц не вариант :(

Answer 1

Вы хотите применить colspan к ячейке, которая должна охватывать всю ширину таблицы В этом случае есть 3. клетки во втором ряду вам нужно будет добавить colspan="3"

HTML:.

<table> 
    <tr> 
     <td colspan="3">1</td> 
    </tr> 
    <tr> 
     <td>1</td> 
     <td>2</td> 
     <td class="wide">3</td> 
    </tr> 
</table> 

JS Fiddle:http://jsfiddle.net/pak1hx68/