1

我有一张放在 div 中的桌子。表由具有 2 列和 1 行的标题组成，colspan 为 2。td 和 th 内的元素是 div 和输入字段。该行占表格宽度的 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>

提前致谢。

4

1 回答 1

0

似乎添加

table { 
  table-layout:fixed; 
}

修复了所有浏览器中的问题

于 2015-08-19T17:56:41.827 回答