css – 表体不占用全表宽度

前端之家收集整理的这篇文章主要介绍了css – 表体不占用全表宽度前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在使用twitter bootstrap进行响应式设计,其中包含一个包含四列的表.我希望表格列的宽度相等,所以我将td宽度设置为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%.

原文链接:https://www.f2er.com/css/242304.html

猜你在找的CSS相关文章