CODEWITHSUNDEEP
htmlcss
Alex
Alex

Reputation: 143

Inline CSS, preserve white space in td for email

I'm thinking this should be simple but I'm having massive problems getting something to work. I basically want to create a table with a cell of fixed width which brings in data from a database whilst preserving line breaks and wraps the text should it be wider than the table width. It's for a helpdesk notification so the text could be details or a request or a link to a particular website etc.

        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    <meta content="en-gb" http-equiv="Content-Language" />
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <title>Untitled 1</title>
    </head>
    
    <body style="font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; font-size: 14px">
    
    <table style="width: 700px; border: 20px solid #00AB66;table-layout:fixed">
        <tr>
            <td style="text-align: center">LOGO</td>
        </tr>
        <tr>
            <td bgcolor="#000000" style="text-align: center; color: #FFFFFF; font-size: 18px">
            Review Request</td>
        </tr>
        <tr>
            <td>Dear XXXX<br />
            The Service desk have xxxxx</td>
        </tr>
        <tr>
            <td bgcolor="#000000" style="color: #FFFFFF; text-align: center; font-size: 18px">
            Request Summary</td>
        </tr>
        <tr>
            <td>
            <table style="width: 100%;table-layout:fixed">
                <tr>
                    <td style="text-align: right; width: 158px">ID:</td>
                    <td>XXXXX</td>
                </tr>
                <tr>
                    <td style="text-align: right; width: 158px">Title:</td>
                    <td>XXXXX</td>
                </tr>
                <tr>
                    <td style="text-align: right; width: 158px"><strong>Description</strong></td>
                    <td>
                    <pre style="font-size:14px;font-family:'Trebuchet MS';word-break:break-all;white-space: pre; width:75%">
                    dfdsfdsfffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff
                    
                    
                    
                    </pre></td>
                </tr>
                <tr>
                    <td style="text-align: right; width: 158px">Requested By:</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td style="text-align: right; width: 158px">Review Instructions:</td>
                    <td>&nbsp;</td>
                </tr>
            </table>
            </td>
        </tr>
        <tr>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
        </tr>
        </table>
    
    </body>
    
    </html>

The template should support outlook and web based email like office 365. This is what currently happens. enter image description here

With the white-space:pre-wrap in as instructed, the preview in expression web is this. Could it be the tool which is the issue?

enter image description here

Upvotes: 1

Views: 1767

Answers (1)

RichardDev
RichardDev

Reputation: 552

Removing the <pre> and moving the inline styling to the nested <td> fixed this for me as well as removing the inline styling white-space: pre; fixed this for me.

Testing this section with a 144 character fake word is also bound to cause issues when you test an email since some devices wont break that into hyphens for multiple lines.

You may also want to consider using spacers for the sides to maintain consistency.

Upvotes: 1

Related Questions