HTML TD width not taking effect

Question

I've got two TD's at the bottom left of my HTML email layout, but the first is not taking effect of the 140px width I've set, any obvious reason why?

http://jsfiddle.net/5xqvj/

enter image description here

<td class="blue-table" width="375px" valign="top">
    <table class="blue-table" cellspacing="0" cellpadding="0">
        <tr>
            <td>
            <a href="#"><img src="http://www.mangemails.co.uk/wyleshardy/3rd-June-2014/slice_03.jpg" /></a>
            </td>
        </tr>
        <tr>
            <td class="blue-table" width="20px"></td>
        </tr>
        <tr>                            
            <td>
            <a href="#"><img src="http://www.mangemails.co.uk/wyleshardy/3rd-June-2014/slice_11.jpg" /></a>
            </td>
        </tr>

        <tr>
            <td>
                <p><strong>8X4 Concrete Mixers</strong><br />
                <p>2006 (56) DAF FAD CF75.360 (Euro 4) 8x4 fitted with McPhee 8m3 Rapid Discharge Concrete Mixer, Serial No: 000962H, Build Date: 08/2006, Eaton 5433-080 PTO, Chutes, Flo Meter, Water Tank and Wash Down Hose, Cab and Rear Controls, Rear Camera (not in use), 8 Speed Manual Transmission, Cruise Control, Single Passenger Seat. etc. Odometer: c.180K Kms. Tested til: End of September 2014.</p><p>
                2004 (04) SCANIA 4 SERIES P114CB-380 8x4 fitted with Hymix 8m3 Rapid Discharge Concrete Mixer, Serial No: H90067, Build Date: 09/12/2003, Sauer HPM51-2 PTO, Chutes, Flo Meter, Water Tank and Wash Down Hose, Cab and Rear Electronic Controls, Brigade BE-255 Backeye Rear Camera and in Cab Monitor, 8 Speed Manual Transmission, Cruise Control, Single Passenger Seat, etc. Odometer: c.266K Kms. Test Expired: End of March 2014.
                </p>
                </p>
            </td>
        </tr>

        <tr>
            <td width="140px">
                <p><strong>Cars</strong><br />
                2011 (61) TOYOTA Verso 2.0 D4-D TR Panoramic Roof 7-Seat 5dr Manual – c.39K miles.
                </p>

            </td>
            <td width="186px"><img src="http://www.mangemails.co.uk/wyleshardy/3rd-June-2014/slice_30.jpg" /></td>
        </tr>

    </table>
</td>

score 1 · Answer 1 · edited May 23 '17 at 12:20

Looks like you've got two cells in your final row - and only one cell in each row above that. This means your table is effectively two columns wide, with the picture of the car in a tacked-on column by itself. This will be messing up the width calculations.

One way to handle this is to make the one-cell rows span two columns each, and leave the two-cell row as is. colspan will do this, and it is applied something like this:

    <tr>
        <td colspan="2">
            <p><strong>8X4 Concrete Mixers</strong><br />
            <p>2006 (56) DAF FAD CF75.360 (Euro 4) 8x4 fitted with McPhee 8m3 Rapid Discharge Concrete Mixer, Serial No: 000962H, Build Date: 08/2006, Eaton 5433-080 PTO, Chutes, Flo Meter, Water Tank and Wash Down Hose, Cab and Rear Controls, Rear Camera (not in use), 8 Speed Manual Transmission, Cruise Control, Single Passenger Seat. etc. Odometer: c.180K Kms. Tested til: End of September 2014.</p><p>
            2004 (04) SCANIA 4 SERIES P114CB-380 8x4 fitted with Hymix 8m3 Rapid Discharge Concrete Mixer, Serial No: H90067, Build Date: 09/12/2003, Sauer HPM51-2 PTO, Chutes, Flo Meter, Water Tank and Wash Down Hose, Cab and Rear Electronic Controls, Brigade BE-255 Backeye Rear Camera and in Cab Monitor, 8 Speed Manual Transmission, Cruise Control, Single Passenger Seat, etc. Odometer: c.266K Kms. Test Expired: End of March 2014.
            </p>
            </p>
        </td>
    </tr>

You need to do this to every row.

This should give your width settings more predictable results.

You can double-check your table layout by giving your table cells a temporary border with CSS like this:

td {
  border: 1px solid red;
}

Edit

Potentially a better solution would be to use CSS, and float: right the picture of the car (add a margin or padding to put some space around it). Then you can treat everything inside <td class="blue-table" width="375px" valign="top"> like a normal set of paragraphs and images and avoid colspan altogether. There is a long post about the merits or otherwise of using tables for layout here if you're interested: Why not use tables for layout in HTML?

score 0 · Answer 2 · answered Jun 03 '14 at 09:46

0

Try this:

<td width="140">

or

<td style="width: 140px">

answered Jun 03 '14 at 09:46

Alex Char

32,879
9
49
70

The width attribute of is deprecated in HTML 5. Use CSS.e.g. of CSS Syntax . Source http://stackoverflow.com/questions/12881067/html-td-width-and-height – Alex Char Jun 03 '14 at 10:31
This is for an e-shot to obeying by Outlooks rules etc. – wharfdale Jun 03 '14 at 11:16

HTML TD width not taking effect

2 Answers2