20
以下は、通常動的に生成されるコンテンツです。ページの主要部分には<div class="span6">があります。ときには、このdivのテーブルがdiv自体よりも広くなります（CSSを調べたところ、幅は100％に設定されています）。私がテーブルに短いテキストを置くだけであれば、あるいはdivをもっと広くしてもすべてうまくいく。 質問は以下のとおりです。スパンより広いブートストラップテーブルを防ぐ
- なぜテーブルは
div class=spanXよりも広くなることができますか？私はいつも考えていた、ブロック要素は、親の幅を取る？ - テーブルのそれぞれの
tdの文字数/スペース数は異なる場合があります。どのようにしてテーブルがdivより大きく広がるのを防ぐのですか？もちろん、私は動的にtsの文字数を確認することができますが、私はこの情報をどうしますか？
HTML：
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>MySite</title>
<meta name="author" content="me"/>
<link href="static/css/bootstrap.css" rel="stylesheet">
<link href="static/css/bootstrap-responsive.css" rel="stylesheet">
<link href="static/profhase.css" rel="stylesheet">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="static/bootstrap/js/bootstrap.js"></script>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<ul class="nav">
<li><a class="brand" href="profhase">MyBrand</a></li>
<li><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Blog</a></li>
</ul>
<div class="nav pull-right collapse nav-collapse" style="hight: 0px">
<ul class="nav collapse nav-collapse">
<li><p class="navbar-text">Apps: </p></li>
<li><a href="firstapp/">AppOne <i class="icon-lock"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="span2">
<p>
My Wonderful sidebar
</p>
</div>
<div class="span6" style="background:red;">
<table class="table">
<tbody>
<tr>
<th>Header1</th>
<th>Header2</th>
<th>Header3</th>
<th>Header4</th>
<th>Header5</th>
<th>Header6</th>
</tr>
<tr>
<td>My first Test</td>
<td>My second Test</td>
<td>My third Test</td>
<td>My fifth Test</td>
<td>My lalalalalong long lelong long long Test</td>
<td>
<div class="btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown">
Dropdown Choices <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a id=1>First wonderful choice</a></li>
</ul>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>