使用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更改这些列的宽度。每当一个＆＃34;细胞＆＃34;调整大小，整个列调整大小。

$(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);
        });
      }
   });
});

当调整单元格大小时，我会遇到以下错误：根据列中单元格的内容，某些单元格会停止＆＃34;停止＆＃34;调整大小并且不会隐藏＆＃34;溢出的内容和单元格宽度将不再同步：

我该如何纠正？有没有办法强迫＆＃34; ＆＃34;细胞上的相同宽度＆＃34;无论内容宽度如何？

Answer 1

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

http://jsfiddle.net/L5ozvsuk/

Answer 2

尽管Amit的回答提供了宽度的解决方案，但它引入了另一个问题，即迫使包装器显示为表格。因此，在调整单元格大小时，“行”的宽度不会改变，“单元格”的宽度也会“调整”。

通过将container设置为display: flex，可以正确调整所有cell项的大小，并自动调整包含的对象的大小，即“新引入的”问题不再存在（更新） Fiddle）。

.container {
  width:600px;  
  border:1px solid black;
  border-right:none;
  display:flex; /*added*/
} 
.cell {
  vertical-align:top;
  display: inline-block;
  width: 150px;
  border-right:1px solid black;
  display: table-cell;
  overflow:hidden; /*added*/
}