我很难将(响应式)表格保存在容器中。我使用可折叠的 Javascript 脚本打开和关闭表格 div。如果有大量列，表格会不断溢出容器外，我想将表格和所有内容保留在里面。这是(重要的 div 和容器)HTML 脚本:
body {
background: url(img/bg.png) no-repeat center center fixed;
font-family: 'Open Sans', sans-serif;
color: #666;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100%;
overflow: auto;
width:100%;
position:absolute;
top:0;
left:0;
}
#pagewrap {
padding: 5px;
width: 1800px;
margin: 20px auto;
}
#middle {
width: 1220px;
float: left;
padding: 5px 15px;
margin: 0px 5px 5px 5px;
}
.table{
display:table;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
border-bottom:2px solid #dddddd;
color:#8d8d8d;
margin:10px 0;
}
.table-head{
display: table-header-group;
}
.table-head .column{
background:#333333;
color:#7d7d;
border-right:1px solid #5d5d5d;
border-bottom:none;
vertical-align: middle;
}
.row{
display:table-row;
}
.row .column:nth-child(1){
border-left:1px solid #eeeeee;
}
.row:last-child .column{
border-bottom:none;
}
.column{
display:table-cell;
padding:10px 20px;
border-bottom:1px solid #eeeeee;
border-right:1px solid #eeeeee;
}<body>
<div id="pagewrap">
<section id="middle">
<a href="#collapse1" onclick="$('p').show();return false;" class="nav-toggle">+ See details</a>
<div id="collapse1" style="display:none">
<div class="table">
<div class="table-head">
<div class="column" data-label="">ID</div>
<div class="column" data-label="">Name</div>
<div class="column" data-label="">Surname</div>
more colums here...
</div>
</div>
</div>
</body>最佳答案
将overflow:auto添加到容器中。
关于html - 在容器内保留响应表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32606048/