Question

我在模态弹出窗口中有一个表。如果需要，我希望表扩展到其容器之外，并给出一个水平滚动条。目前，如果需要：

，它只会将行的高度加倍

我希望水平行为与垂直行为相同（展开并提供滚动条）。这是生成表格的PHP / HTML：

<div class="row"><div class="form-group col-md-12">
    <label>History:</label>
    <div id="table-scroll">
        <table class="table table-bordered table-condensed">
        <thead>
            <th>Date</th><th>From User</th><th>To User</th>
            <th>From Location</th><th>To Location</th><th>By</th>
        </thead>
        <tbody>
            <?php foreach($history as $h){ ;?>
                <tr>
                    <td><?=$h['date'];?></td>
                    <td><?=$h['from_user'];?></td>
                    <td><?=$h['to_user'];?></td>
                    <td><?=$h['from_location'];?></td>
                    <td><?=$h['to_location'];?></td>
                    <td><?=$h['by_user'];?></td>
                </tr>
            <?php } ;?>
        </tbody>
        </table>
    </div>
</div></div>

这是当前应用的CSS：

#table-scroll {
  height: 150px;
  overflow: auto;
}
#table-scroll th {
    text-align: center;
}

Answer 1

使用white-space:nowrap强制它仅在一行中获取文本，然后溢出数据将滚动。

#table-scroll {
  height: 150px;
  overflow: auto;
}
#table-scroll table{
  white-space:nowrap;
  width:100%;
}
#table-scroll th {
    text-align: center;
}

Answer 2

要使表格按照您的意愿运行 - 您需要将其包装在表格响应式标记中 - 这会强制在平板电脑大小的视口上显示水平滚动条 - 检查文档：http://getbootstrap.com/css/#tables-responsive < / p>

<div class='table-responsive'>
        <table class="table table-bordered table-condensed">
        <thead>
            <th>Date</th><th>From User</th><th>To User</th>
            <th>From Location</th><th>To Location</th><th>By</th>
        </thead>
        <tbody>
            <?php foreach($history as $h){ ;?>
                <tr>
                    <td><?=$h['date'];?></td>
                    <td><?=$h['from_user'];?></td>
                    <td><?=$h['to_user'];?></td>
                    <td><?=$h['from_location'];?></td>
                    <td><?=$h['to_location'];?></td>
                    <td><?=$h['by_user'];?></td>
                </tr>
            <?php } ;?>
        </tbody>
        </table>
</div>

我还建议你重新考虑你的设计 - 任何要求以模态显示大量内容（表格或其他）的设计都要求模态做的比实际应该做的更多。但那只是我的意见。

强制水平表滚动条

2 个答案: