Fluent表宽

Question

我觉得这种行为有点奇怪。

我有这样一个结构

        <div class="canvas">
            <div class="table">
                <div class="row">

                    <div class="cell"></div>
                    <div class="cell"></div>
                    <div class="cell"></div>

                </div>
            </div>
        </div>

其中.table，.row，.cell是display:table，table-row和table-cell。

假设单元格的固定宽度为100 in，而画布的宽度为250 in和overflow:hidden，则行中的最后一个单元格将崩溃。表似乎继承了画布的宽度。从没有在任何地方定义过。

1. 为什么table不只是简单地与细胞一起生长呢？我是说，这是张桌子，我不想让行破。如果我想要的话，我会用div。
2. 我怎样才能让桌子表现得像我所期望的那样呢？

谢谢。

Answer 1

考虑这3个样本，前2个有一个周围的div，其中最后一个是使用“最小宽度”，最后一个是(3:rd)，没有任何div。

所有三个“组”都有一个带有display: table的div和一个普通的表元素。

据我所见，他们都表现得像他们所想的那样，所以回答你的问题：

1. 正确的是，表中没有定义的宽度，但是它的父表上有一个宽度，然后它设置了一个边界，表试图适应这个边界。也有一个宽度设置为一个单元格，它试图适应。这应该会使(显然是这样)该表的单元格中断。 如果要删除所有的width/min-width: *px，那么它就会开始增长，就像我想的那样，但是直到它到达下一个边界，在这种情况下，这个边界就是身体，当它到达时，它会再次开始断线。
2. 你觉得他们会怎么做？

​

.canvas {
  width: 250px;
  overflow: hidden;
}
.canvas.min-width {
  width: auto;
  min-width: 250px;
}
.table {
  display: table;
}
.row {
  display: table-row;
}
.cell {
  display: table-cell;
  width: 100px;
  vertical-align: top;
}

<div class="canvas">
  <div class="table">
    <div class="row">

      <div class="cell"> Heyyyy </div>
      <div class="cell"> Heyyyyy 2 </div>
      <div class="cell"> Heyyyyyy 33333333 44444444444 5555555555555555</div>

    </div>
  </div>

  <table>
    <tr>
      <td class="cell"> Heyyyy </td>
      <td class="cell"> Heyyyyy 2 </td>
      <td class="cell"> Heyyyyyy 33333333 44444444444 5555555555555555</td>
    </tr>
  </table>
</div>
<hr />
<div class="canvas min-width">
  <div class="table">
    <div class="row">

      <div class="cell"> Heyyyy </div>
      <div class="cell"> Heyyyyy 2 </div>
      <div class="cell"> Heyyyyyy 33333333 44444444444 5555555555555555</div>

    </div>
  </div>

  <table>
    <tr>
      <td class="cell"> Heyyyy </td>
      <td class="cell"> Heyyyyy 2 </td>
      <td class="cell"> Heyyyyyy 33333333 44444444444 5555555555555555</td>
    </tr>
  </table>
</div>
<hr />
  <div class="table">
    <div class="row">

      <div class="cell"> Heyyyy </div>
      <div class="cell"> Heyyyyy 2 </div>
      <div class="cell"> Heyyyyyy 33333333 44444444444 5555555555555555</div>

    </div>
  </div>

  <table>
    <tr>
      <td class="cell"> Heyyyy </td>
      <td class="cell"> Heyyyyy 2 </td>
      <td class="cell"> Heyyyyyy 33333333 44444444444 5555555555555555</td>
    </tr>
  </table>

​