主页 / 问题 / 638748
Accepted
Игорь
Asked:2020-03-13 15:55:29 +0000 UTC2020-03-13 15:55:29 +0000 UTC

如何强制表格超出父容器的边缘

  • 772

我有一个包含 4 列的表。所有列都具有相同的宽度。我想将按钮拧到右边/左边，以防表格不再适合页面的宽度，而不是超出父级（对于td我设置的 33.333% 宽度，即在这个例子中，第 4 列应该超出可见部分的限制），最后一个 tdshka 的宽度在表中被截断，并获得大致相同的结果。沙箱就在这里。

html

2 个回答

  1. Best Answer

    有人怀疑单元格不能做得比桌子宽。因此，为了让它们超出容器，必须将宽度设置为表格本身，而不是单元格：

    .container {
  width: 100%;
  overflow: auto;
}
table {
  width: 133.333%;
}
table td {
  border: 1px solid black;
}
    <div class="container">
  <table>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr>
  </table>
</div>

    • 3

  2. 一个可行的选择是打破表格布局：

    .container {
  width: 100%;
  overflow: hidden;
}
table {
  width:100%
}
table tr {
  white-space: nowrap;
}
table td {
  width: 33%;
  border: 1px solid black;
  display: inline-block;
}
    <div class="container">
  <table>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr>
  </table>
</div>

    • 2

相关问题