html - 如何在 bootstrp 中创建在移动视图上不能在 x 轴上滚动但仍可见的表？l

Question

我使用引导程序创建了一个表，并将其放入容器流体类的 div 中。在桌面视图中，它看起来像这样：

在我的 CSS 中，我使用 @media 来确定容器流体占据屏幕 100% 的特定宽度，但仍然在移动视图中，表格右侧的一部分被隐藏，我必须水平滚动为了看到它。它看起来像这样：

我的相关html代码是：

<div class="container-fluid" id="tableCont">

    <table class="table">
        <thead>
            <tr>
                <th scope="col">#</th>
                <th scope="col">Product Name</th>
                <th title="Quantity of the product" scope="col">Quantity</th>
                <th scope="col"></th>
                <th scope="col"></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">1</th>
                <td>Tomato </td>
                <td><input type="number" min="1" max="50"></td>
                <td><button title="Include product in list">Include</button></td>
                <td> <button type="button" class="btn btn-labeled btn-danger">
                        <span class="fa fa-remove"></span> Remove</button>
                </td>

            </tr>
            <tr>
                <th scope="row">2</th>
                <td>Potato</td>
                <td><input type="number" min="1" max="50"></td>
                <td><button title="Include product in list">Include</button></td>
                <td> <button type="button" class="btn btn-labeled btn-danger">
                        <span class="fa fa-remove"></span> Remove</button></td>
            </tr>

我的相关CSS是：

.table {
  width: 100%;
}
#tableCont {
  margin-top: 0;
  height: 400px;
  overflow-y: auto;
  border: white;
  width: 68%;
}
@media (max-width: 600px) {
  #tableCont {
    width: 100%;
  }
}

如何设置移动视图，以便在没有水平滚动的情况下看到表格的整个宽度？

标签： htmlcsstwitter-bootstrap

Answer 1

尝试在媒体查询中将宽度更改为最大宽度。

@media (max-width: 600px) {
  #tableCont {
    max-width: 100%;
  }