下面是一个通常动态生成的内容。在页面的主要部分有一个<div class="span6">。 .有时这个 div 中的表格变得比 div 本身更宽(我检查了 css，宽度设置为 100%)。如果我只将短文本放入表中，或者如果我将 div 变宽，一切都很好。
问题是:
- 为什么表格可以变得比
div class=spanX宽？我一直在想， block 元素会占用其父元素的宽度吗？ - 相应
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>
最佳答案
感谢 FelipeAls 的回答，这段代码做到了:
table {
table-layout: fixed;
word-wrap: break-word;
}
另一种可能性是不使用自动换行，而是使用类似 ...
关于html - 防止 Bootstrap 表比跨度宽，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16752649/