dream2891
2018-08-07 14:00
浏览 32
已采纳

Bootstrap表扩展到容器之外

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.

  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

2条回答 默认 最新

  • dongyou6909 2018-08-07 14:06
    已采纳

    Use table-layout:fixed

    .table {
      table-layout: fixed;
    }
    

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

    已采纳该答案
    打赏 评论
  • dqcj32855 2018-08-07 14:06

    You can try modifying the container style differently:

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

    You can change the value of the width itself to whatever you see fit.

    打赏 评论

相关推荐 更多相似问题