Изменяемый размер JQuery изменяет ширину столбца в IE11

Question

У меня есть стол, который находится в div. Таблица состоит из заголовка с 2 столбцами и 1 строкой с colspan из 2. Элементы внутри td и th являются полями div и input. Строка занимает 100% ширины таблицы, первый столбец заголовка использует 90% ширины, а второй столбец использует все, что осталось. Я применил изменяемый размер JQuery к первому столбцу в заголовке и к строке таблицы. Он отлично работает в Firefox, но не в IE11. Как только вы начнете изменять размер div в строке таблицы, ширина столбца заголовка автоматически изменится на 50%, несмотря ни на что. Почему это происходит? Вот пример кода:

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>

Заранее спасибо.

Answer 1

Появляется, что добавление

table { 
  table-layout:fixed; 
}

устраняет проблему во всех браузерах