IE如果达到最大宽度，则将表格单元格移至新行

Question

我遇到Internet Explorer 11的问题，如果表达到100％的宽度，则将表单元格移到新行。 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>

我不想应用的是固定表的。尝试了许多变体，但没有一个起作用。有什么帮助吗？看图片-在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>