Question

我有一张桌子占据了整个周围的div。为了使其响应，我想添加一个水平滚动条。我添加了属性

display: block; 
overflow-x: auto;

到表中，但它减小了表的大小。我发现它是显示：块;这样做的属性。我尝试添加宽度：100％，但它没有工作。有人会知道如何解决这个问题吗？

添加显示块属性之前的图像： https://ibb.co/kLCETv

之后： https://ibb.co/dptXFa

谢谢你的时间！

Answer 1

请用div包装表格并将样式赋予该div而不是表格。

<div class="table-wrapper">
  <table></table>
</div>

Answer 2

将表格换成div，将table更改为block会明显改变其行为

div {
  overflow: auto;
}

<div>
  <table border=1 cellspacing=0 cellpadding=6>
    <tr>
      <th>Placeholder</th>
      <th>Placeholder</th>
      <th>Placeholder</th>
      <th>Placeholder</th>
      <th>Placeholder</th>
      <th>Placeholder</th>
      <th>Placeholder</th>
      <th>Placeholder</th>
      <th>Placeholder</th>
      <th>Placeholder</th>
    </tr>
    <tr>
      <td>Placeholder</td>
      <td>Placeholder</td>
      <td>Placeholder</td>
      <td>Placeholder</td>
      <td>Placeholder</td>
      <td>Placeholder</td>
      <td>Placeholder</td>
      <td>Placeholder</td>
      <td>Placeholder</td>
      <td>Placeholder</td>
    </tr>
    <tr>
      <td>Placeholder</td>
      <td>Placeholder</td>
      <td>Placeholder</td>
      <td>Placeholder</td>
      <td>Placeholder</td>
      <td>Placeholder</td>
      <td>Placeholder</td>
      <td>Placeholder</td>
      <td>Placeholder</td>
      <td>Placeholder</td>
    </tr>
    <tr>
      <td>Placeholder</td>
      <td>Placeholder</td>
      <td>Placeholder</td>
      <td>Placeholder</td>
      <td>Placeholder</td>
      <td>Placeholder</td>
      <td>Placeholder</td>
      <td>Placeholder</td>
      <td>Placeholder</td>
      <td>Placeholder</td>
    </tr>
    <tr>
      <td>Placeholder</td>
      <td>Placeholder</td>
      <td>Placeholder</td>
      <td>Placeholder</td>
      <td>Placeholder</td>
      <td>Placeholder</td>
      <td>Placeholder</td>
      <td>Placeholder</td>
      <td>Placeholder</td>
      <td>Placeholder</td>
    </tr>
  </table>
</div>

添加Display：block后表格减少

2 个答案: