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

css将一个表放在一个div中,并将该div放在另一个div中

css html

-1

user8463863 · 技术社区 · 6 年前

我写了一个VSTS仪表板小部件,我需要一些关于样式的帮助我想为管理员生成一个(通过代码)显示数据的表我需要造型方面的帮助。

我想将包含表的div放在父div的中间,但是如果内容超过了小部件本身的高度,我也希望表有一个滚动条,并且在风格上我希望滚动条出现在子div的边缘。

下面是my 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>

注意 :loader 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的右边缘。

1 回复 | 直到 6 年前

wdm 6 年前

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

现场演示: 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;
}

推荐文章

Softly · 单选按钮未按预期取值

1 年前