我正在编写一个 VSTS 仪表板小部件，我需要一些样式方面的帮助。我想为管理员生成一个表(通过代码)显示数据。我需要造型方面的帮助。
I would like to center the div containing the table inside of the parent div. But I also want the table to have a scrollbar if the content exceeds the height of the widget itself, and stylistically I want the scrollbar to appear on the edge of the child div.
这是我的 index.html 中的 html 代码:
<body>
<div class="widget">
<h2 class="title">My Widget Title</h2>
<div id="loader"></div>
<div id="tableContainer" class="animate-bottom">
</div>
</div>
</body>
注意:加载器 div 用于在应用从 API 获取数据时显示加载器。当数据到达时，我执行以下操作:document.getElementById("loader").style.display = "none";
这是我的 style.css 文件:
.widget {
width: 100%;
text-align: center;
}
#tableContainer {
text-align: initial;
height: auto;
width: auto;
}
tbody {
height: 575px;
overflow-y: auto;
overflow-x: hidden;
display: block;
}
table {
margin: auto;
}
h2 {
text-align: initial;
}
h3 {
text-align: center;
}
目前，子 div 水平居中，但滚动条在子 div 内出现位移。如何让滚动条触及子 div 的右边缘。
最佳答案
此示例显示了一个具有固定高度的小部件，如果包含表格的高度更高，该小部件就会滚动。
现场演示:http://jsfiddle.net/ukwpfgj5/8/
HTML
<div class="widget">
<h2 class="title">My Widget Title</h2>
<div id="loader"></div>
<div id="tableContainer" class="animate-bottom">
<table>
<tbody>
...
</tbody>
</table>
</div>
</div>
CSS
.widget {
text-align: center;
}
#tableContainer {
width: 50%;
height: 200px;
overflow-y: scroll;
margin: 0 auto;
}
table {
width: 100%;
background-color: #ccc;
}
关于html - css 将一个表居中放置在一个 div 中，并将该 div 居中放置在另一个 div 中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51486419/