twitter-bootstrap 表格主体不占据整个表格宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14596325/
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
Table body doesn't occupy full table width
提问by blackp
I'm using twitter bootstrap for a responsive design that contains a table with four columns. I want the table columns to have equal widths, so I have set td widthto 25%.
我正在使用 twitter bootstrap 进行响应式设计，其中包含一个包含四列的表格。我希望表格列的宽度相等，所以我设置td width为 25%。
I would think that the table rows would inherit their size from the table, and the table cells would then each be one quarter of that. This seems to work when the device width is 768px or greater. When the device width is smaller, the rows are sized based on the text in the largest cell, as opposed to the size of the parent table.
我认为表格行会从表格中继承它们的大小，然后表格单元格将是其四分之一。当设备宽度为 768 像素或更大时，这似乎有效。当设备宽度较小时，行的大小基于最大单元格中的文本，而不是父表的大小。
I have included some sample code below, with background coloring on the different elements to highlight the error (made apparent by resizing the window horizontally). The errors are highlighted in yellow (where the underlying table colour is visible).
我在下面包含了一些示例代码，在不同元素上使用背景着色以突出显示错误（通过水平调整窗口大小使错误变得明显）。错误以黄色突出显示（底层表格颜色可见）。
Live example: http://pastehtml.com/view/cqrwl31z2.html
现场示例：http: //pastehtml.com/view/cqrwl31z2.html
I have tested in Chrome and Safari.
我已经在 Chrome 和 Safari 中进行了测试。
<!DOCTYPE html>
<html>
<head>
<title>Table Test</title>
<!-- Bootstrap -->
<link href="http://www.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet" media="screen">
<script type="text/javascript" src="http://www.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
td, th { width: 25% !important; }
table { background-color: yellow; }
tr { background-color: gray; }
th { background-color: aqua; }
td:nth-child(1) { background-color: red; }
td:nth-child(2) { background-color: green; }
td:nth-child(3) { background-color: blue; }
td:nth-child(4) { background-color: purple; }
</style>
</head>
<body>
<div class="container">
<h1>Hello, world!</h1>
<div class="row">
<table class="span12">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<tr>
</tbody>
</table>
</div>
<div class="row">
<table class="span12">
<thead>
<tr>
<th>Longer Table</th>
<th>Headers In</th>
<th>This</th>
<th>Table</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
采纳答案by isherwood
[class*="span"], .uneditable-input[class*="span"],
.row-fluid [class*="span"] {
display: table;
}
Maybe it's not a good idea to use grid classes on a table. Instead, use .span12 on a wrapper div and set the table to width: 100%.
也许在表格上使用网格类不是一个好主意。相反，在包装器 div 上使用 .span12 并将表设置为width: 100%.
回答by 1934286
Put a width on your table.
在你的桌子上放一个宽度。
table {
background-color: yellow;
width:100%;
}
回答by Elon Zito
Make sure any parent containers have the width set at 100%, in addition to the table having either an attribute width="100%"or style="width:100%".
确保所有父容器的宽度设置为100%，除了具有属性width="100%"或的表style="width:100%"。
回答by aswin
When you zoom or the device width becomes greater the specified width it has no space to expand as width is given as % and not as px,so the best way to overcome this is to use min-width:100px
for the td or th which will be the minimum width it will take even when the device width exceeds.
当您缩放或设备宽度变得大于指定宽度时，它没有空间可以扩展，因为宽度以 % 而不是 px 给出，因此克服此问题的最佳方法是使用min-width:100px
td 或 th 这将是最小宽度即使设备宽度超过它也会需要。
