Question

我有一个容器，里面有一张桌子。该表的内容太多，以至于扩展到浏览器视口之外，从而导致水平滚动条。 这真的很好。

挑战是：当表扩展到视口之外时，表的容器会不。 如何使表格的容器与表格一起扩展到视口之外？

这是基本的示例代码（也在this codepen中）：

* {
  box-sizing: border-box;
}

th {
  white-space: nowrap;
}

.container {
  border: 5px solid blue;
}

<div class="container">
  <table>
    <thead>
      <tr>
        <th>column 1 really long heading</th>
        <th>column 2 really long heading</th>
        <th>column 3 really long heading</th>
        <th>column 4 really long heading</th>
        <th>column 5 really long heading</th>
        <th>column 6 really long heading</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>content</td>
        <td>content</td>
        <td>content</td>
        <td>content</td>
        <td>content</td>
        <td>content</td>
      </tr>
    </tbody>
  </table>
</div>

Answer 1

您可以将容器设置为具有$strSQL = "select * from login_log where userid in (select userid from last_log where userid is not null) and LOGIN_ID='423'";，也可以将其设置为具有position: absolute。 overflow-x: scroll将使边框延伸整个容器的整个宽度，因此可以使用连续的边框滚动整个网页，而position: absolute将在实际的容器而不是网页中创建滚动条，并且在容器周围放置边框。

overflow-x: scroll：

position: absolute

* {
  box-sizing: border-box;
}

th {
  white-space: nowrap;
}

.container {
  border: 5px solid blue;
  position: absolute;
}

<div class="container"> <table> <thead> <tr> <th>column 1 really long heading</th> <th>column 2 really long heading</th> <th>column 3 really long heading</th> <th>column 4 really long heading</th> <th>column 5 really long heading</th> <th>column 6 really long heading</th> </tr> </thead> <tbody> <tr> <td>content</td> <td>content</td> <td>content</td> <td>content</td> <td>content</td> <td>content</td> </tr> </tbody> </table> </div>：

overflow-x: scroll

* {
  box-sizing: border-box;
}

th {
  white-space: nowrap;
}

.container {
  border: 5px solid blue;
  overflow-x: scroll;
}

Answer 2

如何使表格的容器与表格一起扩展到视口之外？

尝试在CSS中将container width表示为像素，英寸等。

通过浏览器视口之外的宽表使容器扩展

2 个答案: