Clever Geek Handbook

Text overflow ellipsis in table cell not working in IE8 and IE9

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

table-layout: fixed

won't work because the table cells must have a 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

+3


source to share


4 answers


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

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;
}
+4


source


For compatibility with Internet Explorer you need to enter a type tag at the top:

<!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 solves your problem.

+2


source


In your td, place the tag as p, span, label and fix its width slightly less than the div width. Then it will work.

+2


source


just use td width property

to 50%

instead of a tag, which will work in all 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;
}
0


source






More articles:


All Articles