JQuery resizable changes column width in IE11

Question

I got a table that is placed in a div. Table consists of the header with 2 columns and 1 row with a colspan of 2. Elements inside td's and th's are div's and input fields. The row takes up 100% of table width, first header column uses 90% of the width and the second column uses whatever it has left. I got JQuery's resizable applied to the first column in the header and to the table's row. It works perfectly in firefox, but doesn't in IE11. As soon as you start resizing the div in table's row, the header's column widths automatically resize to 50% no matter what. Why is that happening? Here is the example code:

function applyResizable(element) {
  element.resizable({
    resize: function(event, ui) {
      ui.size.width = ui.originalSize.width;
    }
  });
  console.log(element);
  $(".ui-resizable-handle.ui-resizable-e").remove();
}

$(document).ready(function() {
  applyResizable($(".resizable"));
});

body textarea {
  resize: vertical;
  margin: 0;
  overflow: none;
  box-sizing: border-box;
}
th.th-question-container {
  width: 90%;
}
div.with-borders {
  border-style: solid;
  border-width: 1px;
  padding: 1em;
}
div.legal-page-div {
  width: 100%;
  height: 850px;
  margin-bottom: 10px;
  vertical-align: top;
  position: relative;
}
div#legal-page-div-wrapper {
  position: relative;
  width: 80%;
  padding-bottom: 10px;
  padding-top: 10px;
}
table {
  position: absolute !important;
  width: 93% !important;
  border: 0px none;
  border-spacing: 0px;
  font-size: 0.857em;
  margin: 10px 0px;
  border-collapse: collapse;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<link href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div id="legal-page-div-wrapper" class="form-wrapper">
  <div class="with-borders legal-page-div form-wrapper" id="legal-page-div-1">
    <table id="Q1">
      <thead>
        <tr>
          <th class="th-question-container">
            <div class="question-div with-borders resizable form-wrapper" id="edit-q1" contenteditable="true"></div>
          </th>
          <th>
            <div class="form-item form-type-textfield form-item-W1">
              <input id="edit-w1" name="W1" value="" size="2" maxlength="2" class="form-text" type="text">
            </div>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td colspan="2">
            <div class="with-borders answer-div resizable form-wrapper" id="edit-a1" contenteditable="true"></div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Thanks in advance.

Answer 1

Appears that adding

table { 
  table-layout:fixed; 
}

fixes the problem in all the browsers