代码之家 › 专栏 › 技术社区 › bodorgergely

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

css html

bodorgergely · 技术社区 · 6 年前

我有以下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 是的。

2 回复 | 直到 6 年前

Chase Ingebritson 6 年前

所以我建议你用 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>

bodorgergely 6 年前

我找到了我问题的正确答案。蔡斯·英格布里森给出的答案只能部分地解决我的问题。在我的例子中,我需要表保持为一个表,他的回答使表显示为一个内联块,在这种情况下,如果添加 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>