Question

我很难将（响应）表保存在容器内。我使用可折叠的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>

Answer 1

将overflow:auto添加到容器中。

保留容器内的响应表

1 个答案: