溢出隐藏设置在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>一样简单，即：

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

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

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;