CODEWITHSUNDEEP
htmlcss
fc123
fc123

Reputation: 918

rowspan not working html

I have a table and I am trying to accomplish something like this,enter image description here

So far I have following html, I think I can use rowspan but tried and it's not giving me desired outcome

<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>

Upvotes: 0

Views: 2393

Answers (3)

Venkata Krishna
Venkata Krishna

Reputation: 1776

The image should be on the top row with rowspan=2 which will put it in 2 rows. Also, the td containing should have colspan=3 to cover the rest of the row. Colspan=2 here will leave a gap in this row above the cell "Smart Cars".
The second row automatically fits in the first column with the image since the rowspan given earlier and the remaining 3 columns of the row follows.

<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>

Upvotes: 0

adamdc78
adamdc78

Reputation: 1161

You've got to place the rowspan <td> as the first element in your first <tr>.

The span works downward, so what you have right now is the second row spanning into the third.

Working fiddle.

Upvotes: 3

bhanu09
bhanu09

Reputation: 61

Place the with image in the top row , and it should work fine.

<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>

Upvotes: 0

Related Questions