6

我正在使用 twitter bootstrap 进行响应式设计，其中包含一个包含四列的表。我希望表格列具有相同的宽度，所以我设置td width为 25%。

我认为表格行将从表格继承它们的大小，然后表格单元格将是该大小的四分之一。当设备宽度为 768 像素或更大时，这似乎有效。当设备宽度较小时，行的大小基于最大单元格中的文本，而不是父表的大小。

我在下面包含了一些示例代码，不同元素上的背景颜色以突出显示错误（通过水平调整窗口大小变得明显）。错误以黄色突出显示（基础表颜色可见）。

现场示例： 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>
4

4 回答 4

6 
[class*="span"], .uneditable-input[class*="span"], 
.row-fluid [class*="span"] {
   display: table;
}

也许在表格上使用网格类不是一个好主意。相反，在包装器 div 上使用 .span12 并将表设置为width: 100%.

于 2013-01-30T04:08:55.393 回答
3

在你的桌子上放一个宽度。

http://jsfiddle.net/nEeKQ/4/

table {
background-color: yellow;
width:100%;
}
于 2013-01-30T04:19:58.963 回答
1

确保所有父容器的宽度都设置为100%，除了表格具有属性width="100%"或style="width:100%"。

于 2016-05-02T21:35:32.893 回答
0

当您缩放或设备宽度变得大于指定宽度时，它没有空间可以扩展，因为宽度以 % 而不是 px 给出，因此克服此问题的最佳方法是使用

min-width:100px

td 或 th ，这将是最小宽度即使设备宽度超过它也需要。

于 2013-01-30T04:35:52.663 回答