我正在尝试创建一个周围有灰色背景的简单表格,但表格中的线条总是超出 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;
}
我只是一名实习生,我问我的主管他是否知道如何解决这个问题,但他也想不通,因为我们试图改变的一切都不会影响它。无论我添加什么代码,它都保持不变。 提前致谢。
最佳答案
关于php - Bootstrap 表延伸到容器之外,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51728626/