html - 强制水平表格滚动条

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;
}