Question

我有一个相当长的表，我希望添加一个垂直滚动条。为此，我将桌子包裹在两个div中。内部div具有new List<Category>() { new Category() { Name = "Category 1" }, new Category() { Name = "Category 2", CategoryQuestions = new List<CategoryQuestion>() { new CategoryQuestion() {Question = "Question 1"}, new CategoryQuestion() {Question = "Question 2"} } } }，因此它将收缩环绕表，外部div具有display: inline-block。

问题在于：我已将text-align: center添加到内部div中，这显然会在内部div的内部中添加滚动条，这使得内容宽度等于垂直滚动条的宽度，它会产生水平滚动条。

我无法找到一个好的解决方案。理想情况下，内包装div的宽度应该扩展以适应垂直滚动条，而不是产生水平滚动条。

有什么想法吗？

_{我在这种情况下使用的是Chrome 42和Firefox 39.}

演示此问题的示例：

＆＃13;

overflow-y: auto

＆＃13;

body {
  font: 14px "Verdana", "Arial", "Sans Serif";
}
#wrapper1 {
  text-align: center;
}
#wrapper2 {
  display: inline-block;
  overflow-y: auto;
  max-width: 100%;
  max-height: 150px;
  
  text-align: initial;
}
table {
  min-width: 512px;
  background-color: rgba(0, 0, 0, 0.05);
}
table td {
  background-color: rgba(0, 0, 0, 0.05);
}

＆＃13;

注意：我还尝试使用<div id="wrapper1"> <div id="wrapper2"> <table> <thead> <tr> <th>Foo</th> <th>Bar</th> <th>Baz</th> <th>Foo</th> <th>Bar</th> <th>Baz</th> </tr> </thead> <tbody> <tr> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> </tr> <tr> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> </tr> <tr> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> </tr> <tr> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> </tr> <tr> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> </tr> <tr> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> </tr> <tr> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> </tr> <tr> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> </tr> <tr> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> </tr> <tr> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> </tr> <tr> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> </tr> <tr> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> </tr> <tr> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> </tr> <tr> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> </tr> <tr> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> </tr> <tr> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> </tr> <tr> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> </tr> <tr> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> </tr> <tr> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> </tr> <tr> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> </tr> <tr> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> </tr> <tr> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> </tr> <tr> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> </tr> <tr> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> </tr> <tr> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> </tr> <tr> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> </tr> </tbody> </table> </div> </div>以及width: max-content代替float: left来缩小div的包装，水平滚动条问题保持不变。

注意：在内部div中添加填充等于滚动条的宽度（16px）会破坏当前浏览器中的问题，但显然是一个糟糕的长期解决方案：

＆＃13;

display: inline-block

＆＃13;

body {
  font: 14px "Verdana", "Arial", "Sans Serif";
}
#wrapper1 {
  text-align: center;
}
#wrapper2 {
  display: inline-block;
  overflow-y: auto;
  max-width: 100%;
  max-height: 150px;
  padding-right: 16px;
  
  text-align: initial;
}
table {
  min-width: 512px;
  background-color: rgba(0, 0, 0, 0.05);
}
table td {
  background-color: rgba(0, 0, 0, 0.05);
}

＆＃13;

Answer 1

使用较低版本的chrome尝试使用overflow:scroll用于innerdiv.Am，能够复制该问题并使用overflow:scroll使其完美适用于我。

如何将垂直滚动条添加到居中的展开表中？

1 个答案: