Question

我正在编写VSTS仪表板小部件，并且需要样式方面的一些帮助。我想要一个表（通过代码）为管理员显示数据。我需要样式方面的帮助。

我想将包含表格的div放在父div的中心。但是，如果内容超出窗口小部件本身的高度，我还希望该表具有滚动条，从风格上讲，我希望该滚动条出现在子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>

注意：当应用程序从API提取数据时，加载程序div用于显示加载程序。数据到达后，我将执行以下操作：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的右边缘。

Answer 1

此示例显示了一个具有固定高度的小部件，如果包含表的高度更大，该小部件将滚动。

实时演示：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;
}

css在div内将表格居中，并将div在另一个div内居中

1 个答案: