Bootstrap表扩展到容器之外

Question

I'm trying to create a simple table that has a grey background surrounding it, but the lines from my table always extend past the div container. I tried putting it into a form but that didn't help also.

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

Things I have tried: (from here)

.container { width: 1200px; }

-attempting to change the width of the table.

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

-changing the th/tr/tbody widths to different sizes.

th{
     width: 900px;
}

I'm just and intern and I asked my supervisor if he knew how to fix it and he couldn't figure it out also because everything we tried to change wouldn't affect it at all. It just stays the same no matter what code I add to it. Thanks in advance.

Answer 1

Use table-layout:fixed

.table {
  table-layout: fixed;
}

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