Question

我有以下html / css代码：

body {
  background: #ccc;
}
.container {
  width: 300px;
  margin: 0 auto;
  background: white;
  overflow: auto;
  padding: 20px;
}
table {
  border: 1px solid red;
  margin: 5px 0;
  white-space: nowrap;
}
td {
  padding: 5px;
  border: 1px solid green;
}

<div class="container">
  <table>
    <tr>
      <td class="nowrap">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</td>
    </tr>
  </table>
  <table>
    <tr>
      <td>a</td>
      <td>a</td>
      <td>a</td>
      <td>a</td>
      <td>a</td>
      <td>a</td>
      <td>a</td>
      <td>a</td>
      <td>a</td>
      <td>a</td>
      <td>a</td>
      <td>a</td>
      <td>a</td>
      <td>a</td>
      <td>a</td>
      <td>a</td>
      <td>a</td>
      <td>a</td>
      <td>a</td>
      <td>a</td>
    </tr>
  </table>
</div>

我一直在努力创建一个带有填充的表容器。我已经能够提出一个解决方案，这是它的简化版本。

有人可以向我解释为什么在向右滚动时为什么没有在右侧填充容器填充，并且可能提出了解决办法？

更新

此问题似乎与我后来发现的问题重复：

Horizontal scrolling table - disappearing padding on right edge

正确的答案是使表格的显示为inline-table。

Answer 1

因此，如果您要尊重填充并保持边框，建议您使用display: inline-block;。

我已经研究了一段时间，但似乎找不到有关尊重父代填充表的问题的任何信息。

body {
  background: #ccc;
}
.container {
  width: 300px;
  margin: 0 auto;
  background: white;
  overflow: auto;
  padding: 20px;
}
table {
  border: 1px solid red;
  margin: 5px 0;
  white-space: nowrap;
  display: inline-block;
}
td {
  padding: 5px;
  border: 1px solid green;
}

<div class="container">
  <table>
    <tr>
      <td class="nowrap">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</td>
    </tr>
  </table>
  <table>
    <tr>
      <td>a</td>
      <td>a</td>
      <td>a</td>
      <td>a</td>
      <td>a</td>
      <td>a</td>
      <td>a</td>
      <td>a</td>
      <td>a</td>
      <td>a</td>
      <td>a</td>
      <td>a</td>
      <td>a</td>
      <td>a</td>
      <td>a</td>
      <td>a</td>
      <td>a</td>
      <td>a</td>
      <td>a</td>
      <td>a</td>
    </tr>
  </table>
</div>

Answer 2

我找到了我问题的正确答案。 Chase Ingebritson给出的答案仅部分解决了我的问题。在我的情况下，我需要将该表保留为表，而他的回答使该表显示为嵌入式块，在这种情况下，如果添加table-layout: auto;，它将不会按预期显示。

因此，更好的答案是制作表display: inline-table;（除此以外，我从未发现过实际用途），该表将保留并用作表。最重要的是，在每种情况下都将使用容器填充。

以下是展示答案的示例：

body {
  background: #ccc;
}

.container {
  margin: 0 auto;
  background: white;
  overflow: auto;
  padding: 20px;
}

.big {
  width: 1000px;
}

.small {
  width: 300px;
}

table {
  border: 1px solid red;
  margin: 5px 0;
  white-space: nowrap;
  table-layout: auto;
  width: 100%;
  display: inline-table; // the magic answer
}

td {
  padding: 5px;
  border: 1px solid green;
}

<div class="container big">
  <table>
    <tr>
      <td>a</td>
      <td>a</td>
      <td>a</td>
      <td>a</td>
      <td>a</td>
      <td>a</td>
      <td>a</td>
      <td>a</td>
      <td>a</td>
      <td>a</td>
      <td>a</td>
      <td>a</td>
      <td>a</td>
      <td>a</td>
      <td>a</td>
      <td>a</td>
      <td>a</td>
      <td>a</td>
      <td>a</td>
      <td>a</td>
    </tr>
  </table>
</div>
<div class="container small">
  <table>
    <tr>
      <td>a</td>
      <td>a</td>
      <td>a</td>
      <td>a</td>
      <td>a</td>
      <td>a</td>
      <td>a</td>
      <td>a</td>
      <td>a</td>
      <td>a</td>
      <td>a</td>
      <td>a</td>
      <td>a</td>
      <td>a</td>
      <td>a</td>
      <td>a</td>
      <td>a</td>
      <td>a</td>
      <td>a</td>
      <td>a</td>
    </tr>
  </table>
</div>

水平滚动时表容器元素的填充

2 个答案: