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>