Link to home
Start Free TrialLog in
Avatar of rocky050371
rocky050371

asked on

Table Header Issue

I have the following basic HTML table, the problem the header comes out all over the place, how do I keep it consistent


<table  border="1">
<tr><th>Invoice Description</th><th>Landlord</th><th>Invoice No</th><th>Invoice Amount</th><th>Invoice Date</th></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
</table>
table.JPG
Avatar of Kiran Sonawane
Kiran Sonawane
Flag of India image

1) You need to increase the width of table

2) Need to increase the width of column
ASKER CERTIFIED SOLUTION
Avatar of santhimurthyd
santhimurthyd
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
As per W3C HTML 4.0 specification no wap has been deprecated and instead use the
CSS Style with the below settigns

http://www.w3schools.com/cssref/pr_text_white-space.asp

Info about deprecated styles
http://htmlhelp.com/reference/html40/tables/th.html
Avatar of rocky050371
rocky050371

ASKER

No joy with nowrap
This is the result so far


<table  border="1">
<tr><th style=”white-space: nowrap">Invoice Description</th><th style=”white-space: nowrap">Landlord</th style=”white-space: nowrap"><th>Invoice No</th><th style=”white-space: nowrap">Invoice Amount</th><th style=”white-space: nowrap">Invoice Date</th></tr>
<tr><td>{LIDescription}</td><td>{LDear}</td><td>{LIInvoiceNo}</td><td>{LIAmount}</td><td>{LIInvoiceDate}</td></tr>
</table>
table.JPG
Try with this

There's soem Syntax wrogn int eh above

<table  border="1">
<tr>
    <th style="white-space: nowrap">Invoice Description</th>
    <th style="white-space: nowrap">Landlord</th>
    <th style="white-space: nowrap">Invoice No</th>
    <th style="white-space: nowrap">Invoice Amount</th>
    <th style="white-space: nowrap">Invoice Date</th>
    </tr>
<tr><td>{LIDescription}</td><td>{LDear}</td><td>{LIInvoiceNo}</td><td>{LIAmount}</td><td>{LIInvoiceDate}</td></tr>
Coorection to ur syntax

<table  border="1">
<tr>
<th style=”white-space: nowrap">Invoice Description</th>

<th style=”white-space: nowrap">Landlord
</th style=”white-space: nowrap">


You have added the style to closing command

<th>Invoice No</th>
<th style=”white-space: nowrap">Invoice Amount</th>
<th style=”white-space: nowrap">Invoice Date</th>
</tr>
<tr><td>{LIDescription}</td><td>{LDear}</td><td>{LIInvoiceNo}</td><td>{LIAmount}</td><td>{LIInvoiceDate}</td></tr>
</table>
You can add the style like this in the header:

<style>
TH { white-space: nowrap; }
</style>

If that doesn't work, old-school would be

    ...<th><nobr>Invoice Description</nobr></th>...

No line breaks occur inside the nobr tag pair.
(°v°)
I think the problem is I am sending it via Outlook, when previewed in a browser it is fine
If you sending it Outlook, then you will be getting the Scroll bar in the Outlook and the content won't get wrap, if you place the wrap syntax
So if sending a HTML email how do I ensure it is formatted correctly?
Are you setting the text as HTML Body of the message else normal boby

Take a look into the Sample for HTML format in outlook, this will help

http://support.microsoft.com/kb/310262
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
   
</head>
<body>
<table  border="1">
<tr>
    <th style="white-space: nowrap">Invoice Description</th>
    <th style="white-space: nowrap">Landlord</th>
    <th style="white-space: nowrap">Invoice No</th>
    <th style="white-space: nowrap">Invoice Amount</th>
    <th style="white-space: nowrap">Invoice Date</th>
    </tr>
<tr><td>{LIDescription}</td><td>{LDear}</td><td>{LIInvoiceNo}</td><td>{LIAmount}</td><td>{LIInvoiceDate}</td></tr></table>
</body>
</html>

Open in new window

User generated image
Still exactly the same, it is fine in browser but not in Outlook