2014-12-14 3 views
0

У меня есть таблица, и я пытаюсь сделать что-то вроде этого, enter image description hereRowSpan не работает HTML

До сих пор я следующий HTML, я думаю, что я могу использовать RowSpan но попробовал, и это не дает мне желаемого результата

<table class="table tab-content" style="width:95%" align="center"> 
    <tr class="row"> 
     <td colspan="2"> 
      <h4 class="h4">This is a new Car please call</h4> 
     </td> 
    </tr> 
    <tr class="row"> 
     <td style="width:100px; height=100%;" rowspan="2"> 
      <img width="100%" src="adimg/autos/11.jpg" /> 
     </td> 
     <td style="width:70%">this is a car ad this is a car adthis is a car adthis is a car adthis is a car ad this is a car adthis is a car adthis is a car adthis is a car adthis is a car ad this is a car ad this is a car adthis is a car adthis is a car adthis is a car ad this is a car adthis is a car adthis is a car ... &nbsp&nbsp <a style="font-weight:bold; color:Red" href="#">3 mins ago</a> 
     </td> 
     <td valign="top">$5000</td> 
     <td><b>Smart Cars</b> 
     </td> 
    </tr> 
</table> 
+1

Вещь, которую Вы пытаетесь достичь потребует простой обертки DIV с двумя вложенными плавали дивы, вы не должны использовать 'table' для этого –

ответ

2

Вы должны поместить ряды <td> в качестве первого элемента в своем первом <tr>.

Пролет работает вниз, так что теперь у вас есть второй ряд, охватывающий третий.

Working fiddle.

+0

, когда я поставил <тд на втором ряду в первую очередь это работая так, как я хотел. добавлено к вашему решению – fc123

+0

Вы имеете в виду сохранение img td во второй строке? Это приводит к плохой компоновке (вы можете самостоятельно отредактировать скрипку и посмотреть, что произойдет). – adamdc78

0

Поместите изображение в верхнем ряду, и оно должно работать нормально.

<table class="table tab-content" style="width:95%" align="center"> 
<tr class="row"> 
     <td style="width:100px; height=100%;" rowspan="2"> 
     <img width="100%" src="adimg/autos/11.jpg" /> 
    </td> 
    <td colspan="2"> 
     <h4 class="h4">This is a new Car please call</h4> 
    </td> 

</tr> 
<tr class="row"> 

    <td style="width:70%">this is a car ad this is a car adthis is a car adthis is a car adthis is a car ad this is a car adthis is a car adthis is a car adthis is a car adthis is a car ad this is a car ad this is a car adthis is a car adthis is a car adthis is a car ad this is a car adthis is a car adthis is a car ... &nbsp&nbsp <a style="font-weight:bold; color:Red" href="#">3 mins ago</a> 
    </td> 
    <td valign="top">$5000</td> 
    <td><b>Smart Cars</b> 
    </td> 
</tr> 

0

Изображение должно быть в верхнем ряду с RowSpan = 2, который будет положить его в 2-х строк. Кроме того, содержащая td должна иметь colspan = 3, чтобы покрыть остальную часть строки. Colspan = 2 здесь оставит пробел в этой строке над ячейкой «Smart Cars».
Вторая строка автоматически вписывается в первый столбец с изображением, так как приведенные ранее строки и остальные 3 столбца строки следуют.

<table class="table tab-content" style="width:95%" align="center"> 
<tr class="row"> 
     <td style="width:100px; height=100%;" rowspan="2"> 
     <img width="100%" src="adimg/autos/11.jpg" /> 
    </td> 
    <td colspan="3"> 
     <h4 class="h4">This is a new Car please call</h4> 
    </td> 

</tr> 
<tr class="row"> 

    <td style="width:70%">this is a car ad this is a car adthis is a car adthis is a car adthis is a car ad this is a car adthis is a car adthis is a car adthis is a car adthis is a car ad this is a car ad this is a car adthis is a car adthis is a car adthis is a car ad this is a car adthis is a car adthis is a car ... &nbsp&nbsp <a style="font-weight:bold; color:Red" href="#">3 mins ago</a> 
    </td> 
    <td valign="top">$5000</td> 
    <td><b>Smart Cars</b> 
    </td> 
</tr> 
Смежные вопросы