CODEWITHSUNDEEP
htmlcsshtml-tableword-wrap
copenndthagen
copenndthagen

Reputation: 50800

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 ?

Upvotes: 1

Views: 4508

Answers (2)

thedjpetersen
thedjpetersen

Reputation: 29295

I believe that the attribute should be break-word. This

<td class="htTd" width="100" style="word-wrap:break:word">

should be:

 <td class="htTd" width="100" style="word-wrap:break-word">

Upvotes: 1

mkk
mkk

Reputation: 7693

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)

Upvotes: 0

Related Questions