溢出隱藏設置在IE 11，Firefox中不起作用

Question

請參閱JS Fiddle ，我希望其中的描述實際上是隱藏溢出的內容，並僅顯示分配的寬度百分比的文本。（在這種情況下為17％）。 我正在使用Bootstrap 3.3.7版本進行CSS樣式設置。 我不確定是什么導致了此問題。
誰能幫助我解決這個問題？

<table class="table table-hover table-striped mytable" rules="all" id="gvTimeEntries" style="border-collapse:collapse;" cellspacing="0" border="1">
    <thead>
        <tr style="color:White;background-color:#00A4E4;font-weight:bold;">
            <th class="overflowHidden" scope="col" style="width:17%;">Project</th>
            <th class="overflowHidden" scope="col" style="width:17%;">Sub-Project</th>
            <th class="overflowHidden" scope="col" style="width:17%;">Task</th>
            <th class="overflowHidden" scope="col" style="width:17%;">Description</th>
            <th class="overflowHidden headerOverflowNormal" scope="col" style="width:4%;" valign="top" align="center">Mon</th>
            <th class="overflowHidden headerOverflowNormal" scope="col" style="width:4%;" valign="top" align="center">Tue</th>
            <th class="overflowHidden headerOverflowNormal" scope="col" style="width:4%;" valign="top" align="center">Wed</th>
            <th class="overflowHidden headerOverflowNormal" scope="col" style="width:4%;" valign="top" align="center">Thu</th>
            <th class="overflowHidden headerOverflowNormal" scope="col" style="width:4%;" valign="top" align="center">Fri</th>
            <th class="overflowHidden headerOverflowNormal" scope="col" style="width:4%;" valign="top" align="center">Sat</th>
            <th class="overflowHidden headerOverflowNormal" scope="col" style="width:4%;" valign="top" align="center">Sun</th>
            <th class="overflowHidden headerOverflowNormal" scope="col" style="width:4%;" valign="top" align="center">Total</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="overflowHidden" style="width:17%;">
                <div style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis">
                    <span id="lblProject" title="Rater Onboarding &amp; Support" style="display:inline-block;width:100%;">Maecenas elit ex, feugiat vel fermentum n</span>
                </div>
            </td>
            <td class="overflowHidden" style="width:17%;">
                <div style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis">
                    <span id="lblSubProject" title="Rater Onboarding and Version Release " style="display:inline-block;width:100%;">consectetur adipiscing elit. Phasellus  </span>
                </div>
            </td>
            <td class="overflowHidden" style="width:17%;">
                <div style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis">
                    <span id="lblTask" title="Design &amp; Development" style="display:inline-block;width:100%;">Sample</span>
                </div>
            </td>
            <td class="overflowHidden" style="width:17%;">
                <div style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis">
                    <span id="lblComment" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ultrices ligula ut posuere ultrices. Ut facilisis mauris tortor, vitae molestie lorem bibendum eget. Etiam vehicula maximus dui et auctor. Morbi eget pulvinar sapien. Vivamus mi lorem, congue id porta in, interdum vitae lectus. Fusce id viverra justo, quis finibus metus. Ut feugiat consequat metus at volutpat. Phasellus mi leo, vulputate id tortor eu, accumsan eleifend lectus. Nam lobortis feugiat ligula, eget iaculis risus tristique et. Cras at nunc orci. Sed volutpat magna vel nunc dignissim sodales. Maecenas elit ex, feugiat vel fermentum nec, sollicitudin sit amet dui. Etiam dapibus, lacus non facilisis ullamcorper, quam arcu tempus risus, nec porta orci purus vel lectus. Maecenas nec molestie nisl. Sed id velit ac sapien finibus blandit. In non sed.">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ultrices ligula ut posuere ultrices. Ut facilisis mauris tortor, vitae molestie lorem bibendum eget. Etiam vehicula maximus dui et auctor. Morbi eget pulvinar sapien. Vivamus mi lorem, congue id porta in, interdum vitae lectus. Fusce id viverra justo, quis finibus metus. Ut feugiat consequat metus at volutpat. Phasellus mi leo, vulputate id tortor eu, accumsan eleifend lectus. Nam lobortis feugiat ligula, eget iaculis risus tristique et. Cras at nunc orci. Sed volutpat magna vel nunc dignissim sodales. Maecenas elit ex, feugiat vel fermentum nec, sollicitudin sit amet dui. Etiam dapibus, lacus non facilisis ullamcorper, quam arcu tempus risus, nec porta orci purus vel lectus. Maecenas nec molestie nisl. Sed id velit ac sapien finibus blandit. In non sed.</span>
                </div>
            </td>
            <td class="overflowHidden" style="width:4%;" align="center">
                <div style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis">
                    <span id="lblMon" class="inputMonday">7</span>
                </div>
            </td>
            <td class="overflowHidden" style="width:4%;" align="center">
                <div style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis">
                    <span id="lblTue" class="inputTuesday">6</span>
                </div>
            </td>
            <td class="overflowHidden" style="width:4%;" align="center">
                <div style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis">
                    <span id="lblWed" class="inputWednesday">4</span>
                </div>
            </td>
            <td class="overflowHidden" style="width:4%;" align="center">
                <div style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis">
                    <span id="lblThu" class="inputThursday">7</span>
                </div>
            </td>
            <td class="overflowHidden" style="width:4%;" align="center">
                <div style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis">
                    <span id="lblFri" class="inputFriday">7</span>
                </div>
            </td>
            <td class="overflowHidden" style="background-color:#DDDDDD;width:4%;" align="center">
                <div style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">
                    <span id="lblSat" class="inputSaturday">0</span>
                </div>
            </td>
            <td class="overflowHidden" style="background-color:#DDDDDD;width:4%;" valign="top" align="center">
                <div style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">
                    <span id="lblSun" class="inputSunday">0</span>
                </div>
            </td>
            <td class="overflowHidden" style="background-color:#DDDDDD;width:4%;" align="center">
                <div style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis; height: 100%;">
                    <span id="lblTotalHours" class="inputTotalRow">31</span>
                </div>
            </td>
        </tr>
    </tbody>
</table>

Answer 1

這是因為表單元格將始終嘗試將所有可能的內容放入其維中，而忽略任何寬度聲明，除非您固定其布局。 這就像聲明table-layout: fixed一樣簡單table-layout: fixed在有問題的<table>元素上，即：

.mytable {
    border-collapse: collapse;
    border: 1px solid #cccccc;

    /* Fix layout */
    table-layout: fixed;
}

這是您的代碼的有效示例（或查看固定的小提琴： http : //jsfiddle.net/teddyrised/x397cL72/2/ ）。 您可能希望完整查看它，以獲得更好的效果：

 body { margin-top: 100px; background: none repeat scroll 0 0 #f3f3f4; } body, textarea, * { font-family: Calibri, Helvetica, sans-serif; font-size: 14px; } .mytable { border-collapse: collapse; border: 1px solid #cccccc; table-layout: fixed; } .mytable th, .mytable td { border: 1px solid #cccccc; } .mytable th { text-align: center !important; } .overflowHidden { /*display: inline-grid; display: -ms-inline-grid;*/ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-width: 35px; } 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <table class="table table-hover table-striped mytable" rules="all" id="gvTimeEntries" style="border-collapse:collapse;" cellspacing="0" border="1"> <thead> <tr style="color:White;background-color:#00A4E4;font-weight:bold;"> <th class="overflowHidden" scope="col" style="width:17%;">Project</th> <th class="overflowHidden" scope="col" style="width:17%;">Sub-Project</th> <th class="overflowHidden" scope="col" style="width:17%;">Task</th> <th class="overflowHidden" scope="col" style="width:17%;">Description</th> <th class="overflowHidden headerOverflowNormal" scope="col" style="width:4%;" valign="top" align="center">Mon</th> <th class="overflowHidden headerOverflowNormal" scope="col" style="width:4%;" valign="top" align="center">Tue</th> <th class="overflowHidden headerOverflowNormal" scope="col" style="width:4%;" valign="top" align="center">Wed</th> <th class="overflowHidden headerOverflowNormal" scope="col" style="width:4%;" valign="top" align="center">Thu</th> <th class="overflowHidden headerOverflowNormal" scope="col" style="width:4%;" valign="top" align="center">Fri</th> <th class="overflowHidden headerOverflowNormal" scope="col" style="width:4%;" valign="top" align="center">Sat</th> <th class="overflowHidden headerOverflowNormal" scope="col" style="width:4%;" valign="top" align="center">Sun</th> <th class="overflowHidden headerOverflowNormal" scope="col" style="width:4%;" valign="top" align="center">Total</th> </tr> </thead> <tbody> <tr> <td class="overflowHidden" style="width:17%;"> <div style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis"> <span id="lblProject" title="Rater Onboarding &amp; Support" style="display:inline-block;width:100%;">Maecenas elit ex, feugiat vel fermentum n</span> </div> </td> <td class="overflowHidden" style="width:17%;"> <div style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis"> <span id="lblSubProject" title="Rater Onboarding and Version Release " style="display:inline-block;width:100%;">consectetur adipiscing elit. Phasellus </span> </div> </td> <td class="overflowHidden" style="width:17%;"> <div style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis"> <span id="lblTask" title="Design &amp; Development" style="display:inline-block;width:100%;">Sample</span> </div> </td> <td class="overflowHidden" style="width:17%;"> <div style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis"> <span id="lblComment" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ultrices ligula ut posuere ultrices. Ut facilisis mauris tortor, vitae molestie lorem bibendum eget. Etiam vehicula maximus dui et auctor. Morbi eget pulvinar sapien. Vivamus mi lorem, congue id porta in, interdum vitae lectus. Fusce id viverra justo, quis finibus metus. Ut feugiat consequat metus at volutpat. Phasellus mi leo, vulputate id tortor eu, accumsan eleifend lectus. Nam lobortis feugiat ligula, eget iaculis risus tristique et. Cras at nunc orci. Sed volutpat magna vel nunc dignissim sodales. Maecenas elit ex, feugiat vel fermentum nec, sollicitudin sit amet dui. Etiam dapibus, lacus non facilisis ullamcorper, quam arcu tempus risus, nec porta orci purus vel lectus. Maecenas nec molestie nisl. Sed id velit ac sapien finibus blandit. In non sed.">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ultrices ligula ut posuere ultrices. Ut facilisis mauris tortor, vitae molestie lorem bibendum eget. Etiam vehicula maximus dui et auctor. Morbi eget pulvinar sapien. Vivamus mi lorem, congue id porta in, interdum vitae lectus. Fusce id viverra justo, quis finibus metus. Ut feugiat consequat metus at volutpat. Phasellus mi leo, vulputate id tortor eu, accumsan eleifend lectus. Nam lobortis feugiat ligula, eget iaculis risus tristique et. Cras at nunc orci. Sed volutpat magna vel nunc dignissim sodales. Maecenas elit ex, feugiat vel fermentum nec, sollicitudin sit amet dui. Etiam dapibus, lacus non facilisis ullamcorper, quam arcu tempus risus, nec porta orci purus vel lectus. Maecenas nec molestie nisl. Sed id velit ac sapien finibus blandit. In non sed.</span> </div> </td> <td class="overflowHidden" style="width:4%;" align="center"> <div style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis"> <span id="lblMon" class="inputMonday">7</span> </div> </td> <td class="overflowHidden" style="width:4%;" align="center"> <div style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis"> <span id="lblTue" class="inputTuesday">6</span> </div> </td> <td class="overflowHidden" style="width:4%;" align="center"> <div style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis"> <span id="lblWed" class="inputWednesday">4</span> </div> </td> <td class="overflowHidden" style="width:4%;" align="center"> <div style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis"> <span id="lblThu" class="inputThursday">7</span> </div> </td> <td class="overflowHidden" style="width:4%;" align="center"> <div style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis"> <span id="lblFri" class="inputFriday">7</span> </div> </td> <td class="overflowHidden" style="background-color:#DDDDDD;width:4%;" align="center"> <div style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"> <span id="lblSat" class="inputSaturday">0</span> </div> </td> <td class="overflowHidden" style="background-color:#DDDDDD;width:4%;" valign="top" align="center"> <div style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"> <span id="lblSun" class="inputSunday">0</span> </div> </td> <td class="overflowHidden" style="background-color:#DDDDDD;width:4%;" align="center"> <div style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis; height: 100%;"> <span id="lblTotalHours" class="inputTotalRow">31</span> </div> </td> </tr> </tbody> </table>