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