IE 将 table 个单元格移动到新行，如果达到最大宽度

Question

我在使用 Internet Explorer 11 时遇到问题，如果 table 达到 100% 宽度，将 table 单元格移动到新行。 Opera / Chrome / Mozilla 工作正常。

.atAndUTable {
  text-align: left !important;
  width: auto;
  max-width: 100%;
  display: inline-block
}

.atAndUTable td {
  display: -webkit-inline-box;
  margin-left: 5px;
}

<div class="col-md-12" id="AT">
  <table class="atAndUTable" style="">
    <tbody>
      <tr>
        <td>
          <label class="control-label" for="AT">AT :</label>
        </td>
      </tr>
    </tbody>
  </table>
</div>

我不想申请的是 table-fixed。尝试了很多变体，其中 none 有效。有什么帮助吗？看图片 - 在 19 之后还有 20,21,22,23 - 在 chrome/opera/mozilla 中它移动到第二行但在 IE11 中它根本不会，只是溢出。

Answer 1

您需要更改 HTML 结构。那么我会建议使用 flexbox 来做你想做的事情。

.col-md-12 {
  width: 500px;
}

.atAndUTable {
  text-align: left !important;
  width: auto;
  max-width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.atAndUTable div {
  margin-left: 5px;
}

<div class="col-md-12" id="AT">
  <div class="atAndUTable" style="">
    <div>
      <label class="control-label" for="AT">AT :</label>
    </div>
    <div>
      Some content
    </div>
    <div>
      Some content
    </div>
    <div>
      Some content
    </div>
    <div>
      Some content
    </div>
    <div>
      Some content
    </div>
    <div>
      Some content
    </div>
    <div>
      Some content
    </div>
  </div>
</div>

IE 将 table 个单元格移动到新行，如果达到最大宽度

IE Move table cells to new line if max width reached

html

css

internet-explorer-11