Question

我在bootstrap网格列中有一个大表。

我希望页面有一个水平滚动条（不要让父元素可滚动），我希望页面的其他元素（如标题）与它一起水平增长。

查看下面的示例。

第一个问题：标题的宽度不会增加以适应页面的宽度。

第二个问题： .outer-main-border未正常增长且.inner-data-table溢出。我不希望这种情况发生。

更新1：我知道如何在父元素上使用overflow-x:scroll。不想让它滚动！此页面下面有更多内容，我必须使整个页面不仅可以滚动这部分。

更新2：主要问题是，bootstrap行的增长速度并不像其中的孩子那么多，我想要一个纯Css解决方案来解决这个问题。

更新3：看起来，单列引导网格工作正常，但是有多个列，它只计算最后一列的宽度，第一列不会被采用帐户。

＆＃13;

        .outer-main-border {
            border: 2px solid red;
            display: inline-block;
            min-width:100%;
        }
        .inner-data-table{
            white-space: nowrap;
            border: 1px solid blue;
            margin: 5px;
        }
            .inner-data-table td {
                border: 1px solid blue;
                padding: 2px;
            }

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sample</title>
</head>
<body>
    <div class="navbar navbar-inverse navbar-static-top">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">My Application</a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Page 1</a></li>
                    <li><a href="#">Page 2</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="wrap">
        <div class="container-fluid">

            <div class="outer-main-border">

                <div class="row">
                    <div class="col-xs-2 col-sm-2">Some Content Here</div>
                    <div class="col-xs-10 col-sm-10">

                        <table class="inner-data-table">
                            <tr>
                                <td>Some Text</td>
                                <td>Sample Content</td>
                                <td>Some Text</td>
                                <td>Sample Content</td>
                                <td>Some Text</td>
                                <td>Sample Content</td>
                                <td>Some Text</td>
                                <td>Some Text</td>
                                <td>Sample Content</td>
                                <td>Some Text</td>
                                <td>Sample Content</td>
                                <td>Some Text</td>
                                <td>Sample Content</td>
                                <td>Some Text</td>
                                <td>Some Text</td>
                                <td>Sample Content</td>
                                <td>Some Text</td>
                                <td>Sample Content</td>
                                <td>Some Text</td>
                                <td>Sample Content</td>
                                <td>Some Text</td>
                            </tr>
                        </table>

                    </div>
                </div>

            </div>

        </div>
    </div>
</body>
</html>

＆＃13;

Answer 1

如果数据表可以帮助您，请查看此信息。 https://datatables.net/examples/basic_init/scroll_x.html

欢呼声。

在bootstrap网格列内的大水平表

1 个答案: