Question

我在列（下面的链接中的.col-2类）中有一个响应表（可滚动表），只要表内容超过父级.col-2列的宽度，该表都需要可滚动。我知道table-layout: fixed;，但是在这种情况下无法做到，因为我需要调整单元格以适合内容。在查看下面的链接时，请减小视口的大小，以查看表如何脱离我希望它在.scroll-inner容器中开始滚动的列。

.table {
    margin-bottom: 0;
    max-width: none;
    width: 100%;
}

.panel {
    padding: 15px;
    display: flex;
}

.col-1 {
    min-width: 200px;
    max-width: 220px;
}

.col-2 {
    width: 100%;
}

.scroll-inner {
    overflow-y: hidden;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
}

<div class="container">
    <h1 class="text-center">Table Overflow-X Scroll</h1>
    <div class="panel panel-default">
        <div class="col-1">Column 1 Column ColumnColu mnColumnC olumn</div>
        <div class="col-2">
            <div class="center-block scroll-inner">
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>First Name</th>
                            <th>Last Name</th>
                            <th>Username</th>
                            <th>#</th>
                            <th>Description</th>
                            <th>Description 1</th>
                            <th>Description 2</th>

                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <th scope="row">1</th>
                            <td>Mark</td>
                            <td>Otto</td>
                            <td>@mdo</td>
                            <th>1</th>
                            <th>The sentance starts here</th>
                            <th>The sentance starts here</th>
                            <th>The sentance starts here</th>
                        </tr>
                        <tr>
                            <th scope="row">2</th>
                            <td>Jacob</td>
                            <td>Thornton</td>
                            <td>@fat</td>
                            <th>2</th>
                            <th>The sentance starts here</th>
                            <th>The sentance starts here</th>
                            <th>The sentance starts here</th>
                        </tr>
                        <tr>
                            <th scope="row">3</th>
                            <td>Larry</td>
                            <td>the Bird</td>
                            <td>@twitter</td>
                            <th>3</th>
                            <th>The sentance starts here</th>
                            <th>The sentance starts here</th>
                            <th>The sentance starts here</th>
                        </tr>
                        <tr>
                            <th scope="row">4</th>
                            <td>David</td>
                            <td>Bullock</td>
                            <td>@serkai</td>
                            <th>4</th>
                            <th>The sentance starts here</th>
                            <th>The sentance starts here</th>
                            <th>The sentance starts here</th>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

https://codepen.io/coreybruyere/pen/aXbzQo

Answer 1

这里是您问题的解决方案的代码笔LINK

为您的鳕鱼评论添加了一些小修正，希望这是您想要响应式的

.table {overflow:hidden // added code}    

.col-2 {
  overflow:hidden // added code
}

.center-block {
   overflow : auto; // added code
 }

.table {
  margin-bottom: 0;
  max-width: none;
  width: 100%;
  min-width:900px; // added code
  overflow:hidden   // added code
}

为什么Flex网格中的可滚动表在列容器之外中断？

1 个答案: