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>

我希望水平行为与垂直行为相同（展开并提供滚动条）。这是生成表的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>

---

使用

空白：nowrap

强制它只获取一行文本，然后溢出数据将以滚动方式出现

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

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

---

使用

空白：nowrap

强制它只获取一行文本，然后溢出数据将以滚动方式出现

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

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

---

要使表格按您的需要运行—您需要将其包装在表格响应标签中—这将强制平板电脑大小的视口中出现一个水平滚动条—请查看文档：

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

从用户到用户的日期
从一个地点到另一个地点

---

我还建议您重新考虑您的设计-任何要求在模式中显示大量内容（表格或其他形式）的设计都要求模式做更多的事情。但这只是我的看法。

要使表格按您的意愿运行，您需要将其包装在表格响应标签中，这将强制平板电脑大小的视口中出现水平滚动条-查看文档：

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

从用户到用户的日期
从一个地点到另一个地点

---

我还建议您重新考虑您的设计-任何要求在模式中显示大量内容（表格或其他形式）的设计都要求模式做更多的事情。但这只是我的观点。

给出溢出-x：滚动到#表-scroll@VishalPanara不起作用-表格行仍然会增加高度以容纳其内容。这是因为它是一个响应表格，如果您不想这样做，请删除此“表格边框表格压缩”类并创建自定义表格。@vishal panara-这不是一个响应性表格-表格边框类添加边框，表格压缩类从表格中删除一半通常应用的填充。为了成为一个响应的表-整个表需要包装在一个表响应的div中，该div允许应用引导css-例如溢出和水平滚动，给出溢出-x：滚动到#表-scroll@VishalPanara不起作用-表格行仍然会增加高度以容纳其内容。这是因为它是一个响应表格，如果您不想这样做，请删除此“表格边框表格压缩”类并创建自定义表格。@vishal panara-这不是一个响应性表格-表格边框类添加边框，表格压缩类从表格中删除一半通常应用的填充。为了成为一个响应的表-整个表需要包装在一个表响应的div中，该div允许应用引导css-例如溢出和水平滚动，

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