如果您运行下面的代码片段，您会看到一个在两个轴上溢出的表格。我想要的是把它放在一个盒子里，这样你就可以一直看到水平和垂直的滚动条。如果窗口的大小发生变化，此框也应随页面缩放。从本质上讲，这就像查看 Microsoft Excel 电子表格，其中窗口边缘和表格边框之间的边界一致，并且您始终可以看到滚动条。我该怎么做？
.sidebar {
position: fixed;
display: block;
overflow-x: hidden;
overflow-y: auto;
background-color: #aaa;
top: 0px;
bottom: 0px;
left: 0px;
width: 100px;
}
.main {
margin-left:100px;
}<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<body>
<div class="container">
<div class="sidebar">
<div>
<p>Fixed Sidebar</p>
</div>
</div>
<div class="main">
<div class="row">
<p>Some content above table</p>
</div>
<div class="table-responsive">
<table class="table table-bordered table-condensed">
<thead>
<tr>
<th>
Column 1
</th>
<th>
Column 2
</th>
<th>
Column 3
</th>
<th>
Column 4
</th>
<th>
Column 5
</th>
<th>
Column 6
</th>
</tr>
</thead>
<tbody>
<tr>
<td nowrap>
data 1
</td>
<td nowrap>
data 2
</td>
<td nowrap>
data 3
</td>
<td nowrap>
data 4
</td>
<td nowrap>
data 5
</td>
<td nowrap>
some really really really really long piece of data that's going to make my table overflow on the x-axis
</td>
</tr>
<tr>
<td nowrap>
data 1
</td>
<td nowrap>
data 2
</td>
<td nowrap>
data 3
</td>
<td nowrap>
data 4
</td>
<td nowrap>
data 5
</td>
<td nowrap>
data 6
</td>
</tr>
<tr>
<td nowrap>
data 1
</td>
<td nowrap>
data 2
</td>
<td nowrap>
data 3
</td>
<td nowrap>
data 4
</td>
<td nowrap>
data 5
</td>
<td nowrap>
data 6
</td>
</tr>
<tr>
<td nowrap>
data 1
</td>
<td nowrap>
data 2
</td>
<td nowrap>
data 3
</td>
<td nowrap>
data 4
</td>
<td nowrap>
data 5
</td>
<td nowrap>
data 6
</td>
</tr>
<tr>
<td nowrap>
data 1
</td>
<td nowrap>
data 2
</td>
<td nowrap>
data 3
</td>
<td nowrap>
data 4
</td>
<td nowrap>
data 5
</td>
<td nowrap>
data 6
</td>
</tr>
<tr>
<td nowrap>
data 1
</td>
<td nowrap>
data 2
</td>
<td nowrap>
data 3
</td>
<td nowrap>
data 4
</td>
<td nowrap>
data 5
</td>
<td nowrap>
data 6
</td>
</tr>
<tr>
<td nowrap>
data 1
</td>
<td nowrap>
data 2
</td>
<td nowrap>
data 3
</td>
<td nowrap>
data 4
</td>
<td nowrap>
data 5
</td>
<td nowrap>
data 6
</td>
</tr>
<tr>
<td nowrap>
data 1
</td>
<td nowrap>
data 2
</td>
<td nowrap>
data 3
</td>
<td nowrap>
data 4
</td>
<td nowrap>
data 5
</td>
<td nowrap>
data 6
</td>
</tr>
<tr>
<td nowrap>
data 1
</td>
<td nowrap>
data 2
</td>
<td nowrap>
data 3
</td>
<td nowrap>
data 4
</td>
<td nowrap>
data 5
</td>
<td nowrap>
data 6
</td>
</tr>
<tr>
<td nowrap>
data 1
</td>
<td nowrap>
data 2
</td>
<td nowrap>
data 3
</td>
<td nowrap>
data 4
</td>
<td nowrap>
data 5
</td>
<td nowrap>
data 6
</td>
</tr>
<tr>
<td nowrap>
data 1
</td>
<td nowrap>
data 2
</td>
<td nowrap>
data 3
</td>
<td nowrap>
data 4
</td>
<td nowrap>
data 5
</td>
<td nowrap>
data 6
</td>
</tr>
<tr>
<td nowrap>
data 1
</td>
<td nowrap>
data 2
</td>
<td nowrap>
data 3
</td>
<td nowrap>
data 4
</td>
<td nowrap>
data 5
</td>
<td nowrap>
data 6
</td>
</tr>
<tr>
<td nowrap>
data 1
</td>
<td nowrap>
data 2
</td>
<td nowrap>
data 3
</td>
<td nowrap>
data 4
</td>
<td nowrap>
data 5
</td>
<td nowrap>
data 6
</td>
</tr>
<tr>
<td nowrap>
data 1
</td>
<td nowrap>
data 2
</td>
<td nowrap>
data 3
</td>
<td nowrap>
data 4
</td>
<td nowrap>
data 5
</td>
<td nowrap>
data 6
</td>
</tr>
<tr>
<td nowrap>
data 1
</td>
<td nowrap>
data 2
</td>
<td nowrap>
data 3
</td>
<td nowrap>
data 4
</td>
<td nowrap>
data 5
</td>
<td nowrap>
data 6
</td>
</tr>
<tr>
<td nowrap>
data 1
</td>
<td nowrap>
data 2
</td>
<td nowrap>
data 3
</td>
<td nowrap>
data 4
</td>
<td nowrap>
data 5
</td>
<td nowrap>
data 6
</td>
</tr>
<tr>
<td nowrap>
data 1
</td>
<td nowrap>
data 2
</td>
<td nowrap>
data 3
</td>
<td nowrap>
data 4
</td>
<td nowrap>
data 5
</td>
<td nowrap>
data 6
</td>
</tr>
<tr>
<td nowrap>
data 1
</td>
<td nowrap>
data 2
</td>
<td nowrap>
data 3
</td>
<td nowrap>
data 4
</td>
<td nowrap>
data 5
</td>
<td nowrap>
data 6
</td>
</tr>
<tr>
<td nowrap>
data 1
</td>
<td nowrap>
data 2
</td>
<td nowrap>
data 3
</td>
<td nowrap>
data 4
</td>
<td nowrap>
data 5
</td>
<td nowrap>
data 6
</td>
</tr>
<tr>
<td nowrap>
data 1
</td>
<td nowrap>
data 2
</td>
<td nowrap>
data 3
</td>
<td nowrap>
data 4
</td>
<td nowrap>
data 5
</td>
<td nowrap>
data 6
</td>
</tr>
<tr>
<td nowrap>
data 1
</td>
<td nowrap>
data 2
</td>
<td nowrap>
data 3
</td>
<td nowrap>
data 4
</td>
<td nowrap>
data 5
</td>
<td nowrap>
data 6
</td>
</tr>
<tr>
<td nowrap>
data 1
</td>
<td nowrap>
data 2
</td>
<td nowrap>
data 3
</td>
<td nowrap>
data 4
</td>
<td nowrap>
data 5
</td>
<td nowrap>
data 6
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>最佳答案
这是你想要的吗？
为您的table-responsive 类添加这样的样式
.table-responsive {
overflow-x: scroll;
overflow-y: scroll;
width:100%;
height:100%;}
关于html - 我怎样才能把这张 table 放在一个盒子里？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29621665/