我正在使用 Twitter bootstrap 进行响应式设计，其中包含一个包含四列的表格。我希望表格列的宽度相等，所以我将 td width 设置为 25%。
我认为表格行将从表格中继承它们的大小，然后每个表格单元格将是该表格行的四分之一。当设备宽度为 768px 或更大时，这似乎有效。当设备宽度较小时，行的大小基于最大单元格中的文本，而不是父表的大小。
我在下面包含了一些示例代码，在不同的元素上使用背景颜色来突出显示错误(通过水平调整窗口大小使错误变得明显)。错误以黄色突出显示(基础表格颜色可见)。
实例:http://pastehtml.com/view/cqrwl31z2.html
我已经在 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>
最佳答案
[class*="span"], .uneditable-input[class*="span"],
.row-fluid [class*="span"] {
display: table;
}
也许在表格上使用网格类不是一个好主意。相反，在包装器 div 上使用 .span12 并将表格设置为 width: 100%。
关于css - 表格主体不占据整个表格宽度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14596325/