CODEWITHSUNDEEP
htmlcssellipsis
scorpio1441
scorpio1441

Reputation: 3088

text-overflow ellipsis on table cell does not work in IE8 and IE9

This code works in every browser just fine, of course except IE8 and IE9. Unfortunately those specific users are not allowed to use any other browsers in their environment. Googled for 3 hours, tried all possible CSS solutions, but it wont work. Please advice.

table-layout: fixed is not going to work, because table cells need to have specific width.

http://jsfiddle.net/s7va8mLc/1/

http://jsfiddle.net/s7va8mLc/1/embedded/result/ (for IE8 view)

HTML:

<table>
    <tr>
        <th>Test</th>
        <td>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </td>
    </tr>
</table>

CSS:

table {
    width: 500px;
    border: 1px dotted blue;
}

th {
    width: 250px;
}

td {
    width: 250px;
    max-width: 250px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border: 1px dotted red;
}

Expected result:

Expected result

IE8-9 result:

IE8-9 result

Upvotes: 3

Views: 3617

Answers (4)

Manjunath Siddappa
Manjunath Siddappa

Reputation: 2157

just use td width property to 50% instead of tag it will work on all the browsers i believe.

check this fiddle

<table>
    <tr>
        <td  class="text-center" width="50%">Test</td>      
        <td width="50%">
            Lorem ipsum dolor sit amet, ...
        </td>
    </tr>
</table>

.text-center{  
    text-align:center;
    font-weight:bold;
}

Upvotes: 0

Knut Holm
Knut Holm

Reputation: 4162

Try this, hope it helps (tested in IE8 natively).

http://jsfiddle.net/s7va8mLc/7/

http://jsfiddle.net/s7va8mLc/7/embedded/result/

HTML

<table>
 <tr>
    <th>Test</th>
    <td>
        <span>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </span>
    </td>
 </tr>
</table>

CSS

table {
    width: 500px;
    border: 1px dotted blue;
}
th {
    width: 250px;
}
td, span {
    width: 250px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
span {
    display: block;
    border: 1px dotted red;
}

Upvotes: 4

Shariq
Shariq

Reputation: 275

In your td put a tag like p, span, label and fix its width some less than div width. Then it will work.

Upvotes: 2

muhammad tayyab
muhammad tayyab

Reputation: 812

For getting internet explorer's compatibility you need type tag at the top like that :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Now run this again, I hope it will solve your issue.

Upvotes: 2

Related Questions