Question

我有一张放在div中的桌子。表包含2列的标题和1行的colspan为2.在td和th中的元素是div和输入字段。该行占用表宽的100％，第一个标题列使用90％的宽度，第二列使用它剩下的任何内容。我将JQuery的resizable应用于标题中的第一列和表的行。它在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; 
}

解决了所有浏览器中的问题

JQuery可调整大小在IE11中更改列宽

1 个答案: