Question

我的桌子位于DIV中overflow: auto：

HTML：

<div id="table">
  <table>
    <tr>
      <th>Heading</th>
    </tr>

    <tr>
      <td>Data</td>
    </tr>
  </table>
</div>

总共有6个TH标签和6个TD标签

CSS：

div#table
{
    overflow: auto;
    padding: 15px;
}

div#table table
{
    border-collapse: collapse;
}

溢出确保DIV上有一个水平滚动条，以便可以查看整个表格。

我还在DIV上指定了填充，希望滚动条和表不位于DIV的边缘 - 但是这个位不起作用。

所以基本上我想要的是在DIV周围填充，并且溢出的内容不应该触及DIV的右边缘。我希望这是有道理的！

Answer 1

你需要这样的东西吗？ http://jsbin.com/iseda3 如果是，您可以使用以下代码：

<强> HTML

<div id="table">
  <div>
    <table>
      <tr>
        <th>Heading</th>
        <th>Heading</th>
        <th>Heading</th>
        <th>Heading</th>
        <th>Heading</th>
        <th>Heading</th>
      </tr>
      <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
      </tr>
    </table>
  </div>
</div>

<强> CSS

div#table {
    background:#09F;
    width:150px;
}
div#table div {
    overflow: auto;
    margin: 15px;
}
div#table table {
    border-collapse: collapse;
}

Answer 2

听起来您需要将表包装在另一个<div>元素中，该元素中包含所需的填充。然后，您的表将适合该元素，但仍然会受到父容器溢出的影响。

<div id="table">
  <div style="padding: 1em;">
  <table>
    <tr>
      <th>Heading</th>
    </tr>

    <tr>
      <td>Data</td>
    </tr>
  </table>
  </div>
</div>

Answer 3

您可能需要考虑创建一个具有填充的容器div，然后将ID为table的div放在该较大的div中。

div#tableHolder
{
    padding: 15px;
}
div#table
{
    overflow: auto;
}

div#table table
{
    border-collapse: collapse;
}

溢出DIV中的表

3 个答案: