Html 防止引导表比跨度更宽
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/16752649/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
prevent bootstrap table being wider than span
提问by ProfHase85
Below is a content which is usually generated dynamically. In the main part of the page there is a <div class="span6">
. Sometimes the Table in this div becomes wider than the div itself (I ve checked the css, the width is set to 100%) . If I only put short text into the table, or if i make the div wider everything is fine.
The Questions are:
以下是通常动态生成的内容。在页面的主要部分有一个<div class="span6">
. 有时这个 div 中的 Table 变得比 div 本身更宽(我检查了 css,宽度设置为 100%)。如果我只将短文本放入表格中,或者如果我使 div 更宽,一切都很好。问题是:
- Why can a table become wider than
div class=spanX
? I always thought, a block element takes the width of its parent? - The number of characters/spaces in the respective
td
of the table can vary. How do I prevent the table from growing wider than the div? Of course I can dynamically check for the number of characters in ats
but what do i do with this information?
- 为什么一张桌子可以变得比 宽
div class=spanX
?我一直在想,块元素会占用其父元素的宽度吗? - 相应
td
表格中的字符/空格数可能会有所不同。如何防止表格变得比 div 更宽?当然,我可以动态检查 a 中的字符数,ts
但我如何处理这些信息?
The HTML:
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>
回答by ProfHase85
Thanks to the answer by FelipeAls this code did it:
感谢 FelipeAls 的回答,这段代码做到了:
table {
table-layout: fixed;
word-wrap: break-word;
}
Another possibility is not to use word wrap but having something like ...
另一种可能性是不使用自动换行,而是使用类似...
回答by FelipeAls
I noticed the parent of
span6
is displayed astable
butspan6
is floating. Removing the float and setting thespan*
todisplay: table-cell
works: fiddle
Note: there may have a more suitable class thanspan*
in TB, a class which already hasdisplay: table-cell
.Other solution, but probably not what you want to achieve: the technique of "an element with
overflow: hidden;
alongside a floating element": Working fiddle
The explanation of this magic is named block formatting context (T. J. Koblentz' blog)- question on SO
我注意到的父级
span6
显示为table
但span6
浮动。删除浮点数并将其设置span*
为display: table-cell
有效:fiddle
注意:可能有一个比span*
TB更合适的类,一个已经有display: table-cell
.其他解决方案,但可能不是您想要实现的:“带有
overflow: hidden;
浮动元素的元素”的技术:工作小提琴
这种魔法的解释被称为块格式上下文(TJ Koblentz 的博客)-关于 SO 的问题