Html 将所有表格放在一个div中，并根据设置的高度垂直滚动将div放在中间_Html_Css

Html 将所有表格放在一个div中，并根据设置的高度垂直滚动将div放在中间

html css

Html 将所有表格放在一个div中，并根据设置的高度垂直滚动将div放在中间,html,css,Html,Css,我这里有一个html示例 <body> <div> <table id = "tbl_cusname" name = "tbl_cusname" class = "mytable" width = "300px" style="float: left"> ... <table id = "tbl_drnumber" name = "tbl_drnumber" class = "mytable" wi

我这里有一个html示例

<body>
    <div>
        <table id = "tbl_cusname" name = "tbl_cusname" class = "mytable" width = "300px" style="float: left">
        ...
        <table id = "tbl_drnumber" name = "tbl_drnumber" class = "mytable" width = "60px" style="float: left">
        ...

        and other tables
    </div>
</body>


...
...
和其他表格

据我所知，我所有的表都封装在div中。我想知道我怎样才能做到以下几点

将div与其内容放在一起，而不是放在内容的中心
设置其高度，然后放置垂直滚动条，以防溢出

tysm

您可以使用

边距：0自动

方式并添加

最大高度

来设置div的最大高度，然后您可以滚动，检查下面的代码段：

div{
宽度：500px；
保证金：0自动；
最大高度：300px；
溢出y：滚动；
}


名字
姓氏
年龄
吉尔
史密斯
50
前夕
杰克逊
94
名字
姓氏
年龄
吉尔
史密斯
50
前夕
杰克逊
94
名字
姓氏
年龄
吉尔
史密斯
50
前夕
杰克逊
94
名字
姓氏
年龄
吉尔
史密斯
50
前夕
杰克逊
94
名字
姓氏
年龄
吉尔
史密斯
50
前夕
杰克逊
94
名字
姓氏
年龄
吉尔
史密斯
50
前夕
杰克逊
94

要使div居中，请按如下方式设置宽度和边距：

.yourDivSelector{
    width: 970px;
    margin: auto;
}

min-height: 100%;

要设置高度，请按如下方式使用“最小高度”：

.yourDivSelector{
    width: 970px;
    margin: auto;
}

min-height: 100%;

对于垂直滚动设置：

overflow-y: scroll;

我希望这就是您的想法-

对于制作

div

中心，我使用了：

width: 70%;
margin: 20px auto;

max-height: 200px;
overflow-y: auto;

20px只是为了在顶部和底部留出一些空间

要使

div

在我使用过的溢出内容上滚动：

width: 70%;
margin: 20px auto;

max-height: 200px;
overflow-y: auto;

您可以根据需要使用200px

给你的工作样品

div{
宽度：70%；
保证金：20px自动；
最大高度：200px；
溢出y：自动；
}


嗨，am示例文本
嗨，am示例文本
嗨，am示例文本
嗨，am示例文本
嗨，am示例文本
嗨，am示例文本
嗨，am示例文本
嗨，am示例文本
嗨，am示例文本
嗨，am示例文本
嗨，am示例文本
嗨，am示例文本
嗨，am示例文本
嗨，am示例文本
嗨，am示例文本
嗨，am示例文本
嗨，am示例文本
嗨，am示例文本
嗨，am示例文本
嗨，am示例文本
嗨，am示例文本
嗨，am示例文本
嗨，am示例文本
嗨，am示例文本
嗨，am示例文本
嗨，am示例文本
嗨，am示例文本
嗨，am示例文本
嗨，am示例文本
嗨，am示例文本
嗨，am示例文本
嗨，am示例文本
嗨，am示例文本
嗨，am示例文本
嗨，am示例文本
嗨，am示例文本
嗨，am示例文本
嗨，am示例文本
嗨，am示例文本
嗨，am示例文本
嗨，am示例文本
嗨，am示例文本
嗨，am示例文本
嗨，am示例文本
嗨，am示例文本

希望您正在寻找下面的代码片段

将

height

和

overflow

添加到

div.tableContainer

将

margin:0 auto

设置为容器内的表格

.tableContainer{
宽度：100%；
高度：200px；
溢出：自动；
}
.表格容器表格{
保证金：0自动；
}


头
头
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
头
头
内容
内容
内容
内容