CODEWITHSUNDEEP
htmlhtml-table
deGee
deGee

Reputation: 801

HTML Table issue in IE

I have a nested table structure like this below

<table width="100%">
<tr>
    <td>
        <table id="tableform" cellspacing=5 cellpadding=2 class="form">
        .........
        <tr>
        <td valign="top">
    Select Columns For Report :
        </td>
        </tr>
        </table>
    </td>
</tr>
</table>

Inside the table tableform I have created one html form.

That form has one field label Select Columns For Report : which is the longest label and it is getting wrapped over multiple lines in IE, which I don't want, whereas in firefox and chrome it is working properly.

Do you have any workaround for this problem in IE? If tomorrow, another longer label comes up, then what is there to be done?

Upvotes: 2

Views: 650

Answers (3)

Arnaud Le Blanc
Arnaud Le Blanc

Reputation: 99919

You have to either enlarge the width of the label column so that labels fit:

<table id="tableform" cellspacing=5 cellpadding=2 class="form">
    <col style="width: 300px" />
    ...

Or to set the css property white-space to nowrap on the labels:

<td class="label">Select Columns For Report :</td>

#tableform td.label {
    white-space: nowrap;
}

Upvotes: 0

Jason Gennaro
Jason Gennaro

Reputation: 34863

It might be that you need to specifically set a width for that td, so something like

    <td valign="top" style="width:200px;">
Select Columns For Report :
    </td>

Better yet, give it a class or id and set the width in a stylesheet.

Upvotes: 0

thirtydot
thirtydot

Reputation: 228302

Add a class to the td and add white-space: nowrap:

<td valign="top" class="nowrap">
    Select Columns For Report :
</td>

.nowrap {
    white-space: nowrap
}

Upvotes: 2

Related Questions