Php 引导表扩展到容器之外

我试图创建一个简单的表格，周围有灰色背景，但表格中的线条总是延伸到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>

-正在尝试更改表的宽度

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

-将th/tr/T车斗宽度更改为不同尺寸

th{
     width: 900px;
}

我只是一名实习生，我问我的主管他是否知道如何解决这个问题，但他也不知道，因为我们试图改变的一切都不会影响它。无论我添加了什么代码，它都保持不变。

---

提前感谢。

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

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

---

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

使用

表格布局：固定

.table {
  table-layout: fixed;
}

JSfiddle:
使用2
是合法的HTML，您介意解释一下吗？老实说，我不知道如何使它成为两组行。因为这张桌子是这一页上唯一需要的东西，我觉得有一排长的桌子会让这一页的其余部分感到空荡荡的。哦，谢谢！这对于我在上一页遇到的问题非常有用。我很感激@如果它解决了您的问题，您可以将其标记为答案。
.table {
  table-layout: fixed;
}