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?
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
}
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.
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;
}
精彩评论