Разделить таблицу строк на две строки

Question

Есть ли способ разбить строку таблицы на две строки вместо использования вложенных таблиц?

Это то, что я хочу:

td #4 должен имеет полную ширину, и я не знаю, есть ли CSS трюк или что-нибудь, чтобы сделать это или нет.

ПРИМЕЧАНИЕ: Я не хочу использовать другой <tr> с colspan. Я хочу, чтобы он находился внутри той же строки в пределах другой <td> s, потому что я использую полосатый стол, http://www.getuikit.com/docs/table.html.

Answer 1

Как вы обновили свой вопрос, еще один способ, которым Вы можете сделать, это использовать вложенные div элементы с display: table-cell; свойствами

.top_row { 
    display: table; 
    width: 100%; 
} 

.top_row > div { 
    display: table-cell; 
    width: 50%; 
    border-bottom: 1px solid #eee; 
} 

Demo

Примечание: Да, вы можете float в div, а также , который я предпочту более здесь, с самоочищением class, но я использовал display: table-cell;, поэтому он сохранит такие свойства, как vertical-align: middle;, который может понадобиться, как вы используете table

---

Почему бы не использовать colspan для этого?

Demo

<table border="1" width="100%"> 
    <tr> 
     <td>Hello</td> 
     <td>World</td> 
    </tr> 
    <tr> 
     <td colspan="2">Merged</td> 
    </tr> 
</table> 

Примечание: Я использую border и width атрибуты здесь только для демонстрационных целей, рассмотреть вопрос об объявлении class и стиль его с помощью CSS

Answer 2

Или вы можете использовать JQuery сделать все это. Смотрите скрипку демо here

HTML код здесь:

<table> 
    <tr id="row1"> 
     <td>a 
     </td> 
     <td>b 
     </td> 
     <td>c 
     </td> 
    </tr> 
    <tr id="row2"> 
     <td>a2 
     </td> 
     <td>b2 
     </td> 
     <td>c2 
     </td> 
    </tr> 
</table> 
<button id="b1">click here</button> 

И обработчик JQuery как:

$(document).ready(function(){ 
    $('#b1').on('click',function(){ 
     var v=$('</tr><tr id="row11" colspan=3><td>text</td>'); 
     $('#row1').after(v);}); 
    });