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。

假设某个单元格的固定宽度为100px，并且画布的宽度为250px且overflow:hidden，则该行中的最后一个单元格将会分解。该表似乎继承了画布的宽度。从未在任何地方定义过它。

为什么table不仅仅是与它一起成长？我的意思是它是一张桌子，我不想让行破坏。如果我想要，我会使用div。
如何让表格表现得像我预期的那样？

感谢。

Answer 1

考虑这3个样本，前2个有一个周围的div，其中2个中的最后一个使用“min-width”，最后一个（3：rd）没有任何div。

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

据我所知，他们都表现得如此，所以回答你的问题：

表上没有定义的宽度是正确的，但是父表上有一个宽度，然后设置表尝试适应的边界。还有一个设置为单元格的宽度，它试图适应。这应该（并且显然确实）表的细胞断线。

如果有人会删除所有width/min-width: *px，那么它会开始增长，正如我猜你想的那样，但只有在它到达下一个边界时才会增长，在这种情况下就是身体，在那里，它会再次开始破线。
您认为他们的表现如何？

.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>

流畅的桌子宽度

1 个答案: