0
我在自举栅格列内有一个大型表格。自举栅格列内的大型水平表格
我想要页面到有一个水平滚动条（不使父元素可滚动），我希望页面的其他元素（如标题）与它一起水平增长。
查看下面的示例。
第一个问题：标题的宽度不适合页面的宽度。
第二个问题：.outer-main-border生长不正常，.inner-data-table溢出。我不希望发生这种情况。
更新1：我知道如何在父元素上使用overflow-x:scroll。不想让这个滚动！本页下方有更多内容，我必须让整个页面不仅可以滚动。
更新2：主要问题是，引导行不像其内部的孩子那么多，我想要一个纯粹的Css解决方案来解决这个问题。
更新3：它看起来，单列自举网格工作正常，但有多个列，它只是计算最后一列的宽度并且不考虑第一列。
.outer-main-border {
border: 2px solid red;
display: inline-block;
min-width:100%;
}
.inner-data-table{
white-space: nowrap;
border: 1px solid blue;
margin: 5px;
}
.inner-data-table td {
border: 1px solid blue;
padding: 2px;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sample</title>
</head>
<body>
<div class="navbar navbar-inverse navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">My Application</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
</ul>
</div>
</div>
</div>
<div class="wrap">
<div class="container-fluid">
<div class="outer-main-border">
<div class="row">
<div class="col-xs-2 col-sm-2">Some Content Here</div>
<div class="col-xs-10 col-sm-10">
<table class="inner-data-table">
<tr>
<td>Some Text</td>
<td>Sample Content</td>
<td>Some Text</td>
<td>Sample Content</td>
<td>Some Text</td>
<td>Sample Content</td>
<td>Some Text</td>
<td>Some Text</td>
<td>Sample Content</td>
<td>Some Text</td>
<td>Sample Content</td>
<td>Some Text</td>
<td>Sample Content</td>
<td>Some Text</td>
<td>Some Text</td>
<td>Sample Content</td>
<td>Some Text</td>
<td>Sample Content</td>
<td>Some Text</td>
<td>Sample Content</td>
<td>Some Text</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
我想给你的'。外部主边框{宽度：100％; overflow-x：auto;}'优于滚动所有页面 – Duannx
@Duannx这只是一个示例，在我的真实应用程序中，我的页面需要滚动，而不是一个元素。 –
@AfshinGh你在找什么类似[this]（https://jsfiddle.net/v6rja1dz/1/） – user3284463