引导表延伸到容器之外

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>

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

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

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