Reputation: 61

TD taking up entire width of row

I need to set up an HTML table for an email in which each column has a set width.

The left column is just an image and the right is to have text. I have set td width but the td renders as 600px wide no matter what.

The email can be viewed here

Here is the code

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="description" content="Fitzgerald Description">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>
        Fitzgerald Email
    </title>
</head>
<body bgcolor="#ffffff" style="margin:0; padding:0; width:100% !important; background-color:#f8f6f2; font-family:Calibri, 'Helvetica Neue', Helvetical, Arial, Geneva, clean, sans-serif;">
<table bgcolor="#ffffff" align="center" border="0" cellpadding="0" cellspacing="0" style="width:600px; max-width:600px; margin:0 auto 0 auto;" width="600">
    <tbody>
        <tr>
            <td align="center" style="text-align:center;" width="600">
                <img align="none" alt="Fitzgerald Header" border="0" src="http://i.imgur.com/MLEroOA.jpg" style="width: 600px;" width="600">
            </td>
        </tr>
        <tr>
            <td width="244">
            <img align="none" alt="Fitzgerald Pictures" border="0" src="http://i.imgur.com/nn93sj7.jpg" style="width:244px;" width="244">
            </td>
            <td width="356">
            <p style="font-size:18px; color:##71032d;">
                Going, Going ...
            </p>

            </td>
        </tr>
        <tr>
            <td align="center" width="600">
                <div style="font-size:12px; color:#9d9d9c">
                288 Macon Ave. | Asheville, North Carolina 28804 | 828-251-1140 | <a href="thefitzgeraldatgrovepark.com" style="color:#9d9d9c; text-decoration: none">thefitzgeraldatgrovepark.com</a>
                </div>
            </td>
        </tr>
        <tr>
            <td align="left" width="600">
                <p style="font-size:12px; color:#9d9d9c; margin-left:18px; margin-right:18px;">
                Sales by Beverly-Hanks &amp; Associates, licensed in North Carolina. This is not an offer to sell to residents of any state or province in which legal requirements have not been fulfilled. This offer is void where prohibited by law. All features, services, amenities, descriptions and other information set forth in this communication are subject to change at any time without notice. The features, services, amenities and other privileges of owners of a Residence at The Fitzgerald are limited to those included in the Purchase Agreement and the Declaration of Condominium for The Fitzgerald Condominium. Certain mandatory dues, assessments, fees and charges apply to Residences at The Fitzgerald in connection with services, features and amenities described herein, contact a Fitzgerald sales professional for details. Depictions include amenities and furniture in the Model Homes which are not included in the sale of a Residence at The Fitzgerald.
                </p>
            </td>
        </tr>
        <tr>
            <td align="center" width="600" height="10"></td>
        </tr>
    </tbody>
</table>
</body>
</html>

Upvotes: 1

Answers (5)

Jay Brunet

Reputation: 3750

Try adding this style to your table.

table-layout:fixed;

The default value is "auto" which I think is (weird) updated behavior, compared to the classic way of doing tables from 1994-2004.

https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout

I'm still not sure why "auto" forces a "td" to take up an entire row, when then content is much smaller than the width of the table. Does the "auto" engine have some glitches or weird behavior? Not sure.

Upvotes: 1

Everett Green

Reputation: 632

You have an uneven number of columns in each row. On td elements that you wish to span both columns, specify a colspan attribute of the number of columns to be spanned.

JSFiddle

<td align="center" style="text-align:center;" width="600" colspan="2">

Edit:

Without this colspan attribute, each subsequent row's first column is assuming the width of the widest cell in the column - in this case the 600px wide first column of the first row.

Upvotes: 3