javascript - 使用 jQuery Resizable 同步宽度不适用于不同的内容/字宽

Question

我有一个类似结构的表，它是用 div 构建的(有关详细信息，请参阅 Fiddle)。总是至少有两列。

<div class="wrapper">
  <div class="container">
    <div class="cell ">c_1_1 c_1_1 c_1_1</div>
    <div class="cell ">c_1_2 c_1_2 c_1_2</div>
    <div class="cell ">c_1_3 c_1_3 c_1_3</div>
    <div class="cell ">c_1_4 c_1_4 c_1_4</div>
  </div>
  ...
</div>

可以使用 jQuery Resizable 更改这些列的宽度。每当调整“单元格”的大小时，整个列的大小都会调整。

$(document).ready(function () {
  var properties = {};

  $(".cell").resizable({
    handles: "e",
    start: function (e, ui) {
      properties.tableWidth = $(".container").width();
    },
    resize: function (e, ui) {
      var delta = ui.size.width - ui.originalSize.width;
      $(".container").width(properties.tableWidth + delta);
      var index = ui.element.index();
        $(".container").each(function (i, e) {
          $($(".cell", e)[index]).width(ui.size.width);
        });
      }
   });
});

调整单元格大小时遇到​​以下错误:根据列中单元格的内容，某些单元格将“停止”调整大小并且不会“隐藏”溢出的内容并且单元格宽度将不再同步:

我该如何纠正这个问题？无论内容宽度如何，是否有一种方法可以在“单元格”上“强制”使用相同的宽度？

Answer 1

将 .container 显示更改为 table-row 将解决问题。

http://jsfiddle.net/L5ozvsuk/