Search code examples
htmlcsshtml-tableword-wrap

CSS issue of fixed height and word-wrap

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 ?

Solution

  • 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)