IE Move table cells to new line if max width reached

user_6504337 0
Viewed 48

I have a problem with Internet Explorer 11 and moving table cells to new line if table reaches 100% width. Opera / Chrome / Mozilla works fine.

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

What I dont want to apply is table-fixed. Tried many variants, none of them is working. Any help please ? Look at the picture - after 19 there is also 20,21,22,23 - in chrome / opera / mozilla it moves to the second line but in IE11 it simply wont, just overflows.

enter image description here

internet-explorer-11 css html
1 Answers

You need to change your HTML structure. Then I would suggest using flexbox for what you're trying to do.

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

user_21171560
Related