引导表延伸到容器之外

Question

我正在尝试创建一个简单的表格，其周围有灰色背景，但表格中的线条总是延伸超过 div 容器。我尝试将其放入表格中，但这也没有帮助。

<style>
div {
background-color: #f2f2f2;
border-radius: 25px;
}
</style>
<div class="container">
<table class="table table-condensed">
<thead>
    <!-- <tr style="max-width: 60%" > -->
    <tr>
        <th>Hour 1</th>
        <th>Hour 2</th>
        <th>Hour 3</th>
        <th>Hour 4</th>
        <th>Hour 5</th>
        <th>Hour 6</th>
    </tr>
</thead>

<tbody>
    <tr>
        <td><input value="78" type="number" name="grabActual1" id="grabActual1"  placeholder="actual" style="max-width: 60%" ><br><br></td>
        <td><input value="92" type="number" name="grabActual2" id="grabActual2"  placeholder="actual" style="max-width: 60%"><br><br></td> 
        <td><input value="92" type="number" name="grabActual3" id="grabActual3"  placeholder="actual" style="max-width: 60%"><br><br></td> 
        <td><input value="92" type="number" name="grabActual4" id="grabActual4"  placeholder="actual" style="max-width: 60%"><br><br></td>
        <td><input value="92" type="number" name="grabActual5" id="grabActual5"  placeholder="actual" style="max-width: 60%"><br><br></td>
        <td><input value="92" type="number" name="grabActual6" id="grabActual6"  placeholder="actual" style="max-width: 60%"><br><br></td>
    </tr>
</tbody>

<thead>
    <tr>
        <th>Hour 7</th>
        <th>Hour 8</th>
        <th>Hour 9</th>
        <th>Hour 10</th>
        <th>Hour 11</th>
        <th>Hour 12</th>
    </tr>
</thead>

<tbody>
    <tr>
        <td><input value="92" type="number" name="grabActual7" id="grabActual7"  placeholder="actual" style="max-width: 60%"><br><br></td> 
        <td><input value="78" type="number" name="grabActual8" id="grabActual8"  placeholder="actual"style="max-width: 60%" ><br><br></td> 
        <td><input value="0" type="number" name="grabActual9" id="grabActual9"  placeholder="actual" style="max-width: 60%" ><br><br></td> 
        <td><input value="0" type="number" name="grabActual10" id="grabActual10"  placeholder="actual" style="max-width: 60%"><br><br></td> 
        <td><input value="0" type="number" name="grabActual11" id="grabActual11"  placeholder="actual" style="max-width: 60%" ><br><br></td> 
        <td><input value="0" type="number" name="grabActual12" id="grabActual12"  placeholder="actual" style="max-width: 60%"><br><br></td> 
    </tr>
</tbody>
 </table>

 </div>

我尝试过的事情：（来自这里）

.container { width: 1200px; }

-尝试更改表格的宽度。

table{
    table-layout: auto;
    width: 500px; 
 }

-将 th/tr/tbody 宽度更改为不同尺寸。

th{
     width: 900px;
}

我只是一名实习生，我问我的主管是否知道如何解决它，他也无法弄清楚，因为我们试图改变的一切都不会影响它。无论我添加什么代码，它都保持不变。 预先感谢。

Answer 1

使用

table-layout:fixed

.table {
  table-layout: fixed;
}

JSfiddle：http://jsfiddle.net/GCu2D/4889/

Answer 2

您可以尝试以不同的方式修改容器样式：

@media (min-width: 1200px)
.container {
    max-width: 100%;
    width: 75%;
    margin: 0 auto;
}

您可以将宽度本身的值更改为您认为合适的任何值。

Answer 3

Bootstrap 5.3 更新 -
您可以使用引导类

.table

和类

.table-responsive

的 div 来包装该元素。这将防止表格延伸到其容器之外，并在移动设备上的表格本身内启用水平滚动。
一个例子-

<div class="row">
    <div class="col table-responsive">
        <table class="table">
        </table>
    </div>
</div>

文档链接 - Bootstrap 5.3 表