Question

I have a table coded as below;

<table style="table-layout:fixed">
<tr>
    <td class="htTd" width="100" style="word-wrap:break-word">someDynamicLongtextsomeLongtextsomeLongtextsomeLongtextsomeLongtextsomeLongtextsomeLongtextsomeLongtext</td>
    <td class="htTd" width="100" style="word-wrap:break-word">someLongtextsomeLongtextsomeLongtext</td>
</tr>
<tr>
    <td class="htTd" width="100" style="word-wrap:break-word">someContentsomeContentsomeContent</td>
    <td class="htTd" width="100" style="word-wrap:break-word">someContent</td>
</tr>
</table>

In CSS, I have

htTd{height:30px}

Now the issue is that since the content is dynamic (coming from JSP), the long text does not wrap correctly in IE. In IE, it kind of displays 2 lines and just hides the rest of the content. It wraps correctly in Firefox.

While the issue can be fixed by just removing the height attribute from the CSS…Unfortunately I cannot do that since my CSS is used in many other files and hence I cannot change the CSS.

How do I fix the issue by adding any other CSS attribute in the CSS ?

Answer 1

you can for example add an id to the table and write something like this:

#tableId td{height: auto !important;}

or just

#tableId .htTd{height: auto} (i would vote for that one)