我想为我的引导程序表实现垂直滚动条。
我阅读了很多示例并成功实现了垂直滚动条，但问题是我无法设置td和th的宽度。
以下是我的表格代码：
/* Student Information */
.box {
width: 100%;
max-width: 1180px;
position: relative;
border-spacing: 0;
max-width: 1120px;
border: 2px solid #7ab643;
}
.box th {
font-size: 11px;
font-family: Pro Regular;
color: #055938;
text-transform: uppercase;
}
.box td {
font-size: 12px;
line-height: 24px;
font-family: Pro Regular;
color: #a19b97;
}
.box tr td:first {} .box tr {
height: 20px;
}
tbody {
overflow-y: auto;
overflow-x: hidden;
}<div class="table-responsive col-lg-12">
<!-- table starts -->
<table class="box">
<caption align="top">Student Information's</caption>
<thead>
<tr>
<th></th>
<th>First Name</th>
<th>Last Name</th>
<th>Student Id</th>
<th>Email</th>
<th>Phone</th>
<th>Address</th>
<th>City</th>
<th>State</th>
<th>Birthday</th>
<th>Status</th>
<th>Payments</th>
<th></th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td>
<div class="blue dots"></div>
</td>
<td>Hitu</td>
<td>Bansal</td>
<td>mhshshsh-01</td>
<td>hbansal@smartlayer.ca</td>
<td>9417113388</td>
<td>Chandigarh</td>
<td>Chand</td>
<td>CH</td>
<td>25 Oct</td>
<td>Done</td>
<td>Yes</td>
<td>Edit</td>
</tr>
<tr class="even">
<td>
<div class="yellow dots"></div>
</td>
<td>Hitu</td>
<td>Bansal</td>
<td>mhshshsh-01</td>
<td>hbansal@smartlayer.ca</td>
<td>9417113388</td>
<td>Chandigarh</td>
<td>Chand</td>
<td>CH</td>
<td>25 Oct</td>
<td>Done</td>
<td>Yes</td>
<td>Edit</td>
</tr>
<tr class="odd">
<td>
<div class="blue dots"></div>
</td>
<td>Hitu</td>
<td>Bansal</td>
<td>mhshshsh-01</td>
<td>hbansal@smartlayer.ca</td>
<td>9417113388</td>
<td>Chandigarh</td>
<td>Chand</td>
<td>CH</td>
<td>25 Oct</td>
<td>Done</td>
<td>Yes</td>
<td>Edit</td>
</tr>
<tr class="even">
<td>
<div class="yellow dots"></div>
</td>
<td>Hitu</td>
<td>Bansal</td>
<td>mhshshsh-01</td>
<td>hbansal@smartlayer.ca</td>
<td>9417113388</td>
<td>Chandigarh</td>
<td>Chand</td>
<td>CH</td>
<td>25 Oct</td>
<td>Done</td>
<td>Yes</td>
<td>Edit</td>
</tr>
<tr class="odd">
<td>
<div class="blue dots"></div>
</td>
<td>Hitu</td>
<td>Bansal</td>
<td>mhshshsh-01</td>
<td>hbansal@smartlayer.ca</td>
<td>9417113388</td>
<td>Chandigarh</td>
<td>Chand</td>
<td>CH</td>
<td>25 Oct</td>
<td>Done</td>
<td>Yes</td>
<td>Edit</td>
</tr>
<tr class="even">
<td>
<div class="yellow dots"></div>
</td>
<td>Hitu</td>
<td>Bansal</td>
<td>mhshshsh-01</td>
<td>hbansal@smartlayer.ca</td>
<td>9417113388</td>
<td>Chandigarh</td>
<td>Chand</td>
<td>CH</td>
<td>25 Oct</td>
<td>Done</td>
<td>Yes</td>
<td>Edit</td>
</tr>
<tr class="odd">
<td>
<div class="blue dots"></div>
</td>
<td>Hitu</td>
<td>Bansal</td>
<td>mhshshsh-01</td>
<td>hbansal@smartlayer.ca</td>
<td>9417113388</td>
<td>Chandigarh</td>
<td>Chand</td>
<td>CH</td>
<td>25 Oct</td>
<td>Done</td>
<td>Yes</td>
<td>Edit</td>
</tr>
<tr class="even">
<td>
<div class="yellow dots"></div>
</td>
<td>Hitu</td>
<td>Bansal</td>
<td>mhshshsh-01</td>
<td>hbansal@smartlayer.ca</td>
<td>9417113388</td>
<td>Chandigarh</td>
<td>Chand</td>
<td>CH</td>
<td>25 Oct</td>
<td>Done</td>
<td>Yes</td>
<td>Edit</td>
</tr>
<tr class="odd">
<td>
<div class="blue dots"></div>
</td>
<td>Hitu</td>
<td>Bansal</td>
<td>mhshshsh-01</td>
<td>hbansal@smartlayer.ca</td>
<td>9417113388</td>
<td>Chandigarh</td>
<td>Chand</td>
<td>CH</td>
<td>25 Oct</td>
<td>Done</td>
<td>Yes</td>
<td>Edit</td>
</tr>
<tr class="even">
<td>
<div class="yellow dots"></div>
</td>
<td>Hitu</td>
<td>Bansal</td>
<td>mhshshsh-01</td>
<td>hbansal@smartlayer.ca</td>
<td>9417113388</td>
<td>Chandigarh</td>
<td>Chand</td>
<td>CH</td>
<td>25 Oct</td>
<td>Done</td>
<td>Yes</td>
<td>Edit</td>
</tr>
<tr class="odd">
<td>
<div class="blue dots"></div>
</td>
<td>Hitu</td>
<td>Bansal</td>
<td>mhshshsh-01</td>
<td>hbansal@smartlayer.ca</td>
<td>9417113388</td>
<td>Chandigarh</td>
<td>Chand</td>
<td>CH</td>
<td>25 Oct</td>
<td>Done</td>
<td>Yes</td>
<td>Edit</td>
</tr>
<tr class="even">
<td>
<div class="yellow dots"></div>
</td>
<td>Hitu</td>
<td>Bansal</td>
<td>mhshshsh-01</td>
<td>hbansal@smartlayer.ca</td>
<td>9417113388</td>
<td>Chandigarh</td>
<td>Chand</td>
<td>CH</td>
<td>25 Oct</td>
<td>Done</td>
<td>Yes</td>
<td>Edit</td>
</tr>
<tr class="odd">
<td>
<div class="blue dots"></div>
</td>
<td>Hitu</td>
<td>Bansal</td>
<td>mhshshsh-01</td>
<td>hbansal@smartlayer.ca</td>
<td>9417113388</td>
<td>Chandigarh</td>
<td>Chand</td>
<td>CH</td>
<td>25 Oct</td>
<td>Done</td>
<td>Yes</td>
<td>Edit</td>
</tr>
<tr class="even">
<td>
<div class="yellow dots"></div>
</td>
<td>Hitu</td>
<td>Bansal</td>
<td>mhshshsh-01</td>
<td>hbansal@smartlayer.ca</td>
<td>9417113388</td>
<td>Chandigarh</td>
<td>Chand</td>
<td>CH</td>
<td>25 Oct</td>
<td>Done</td>
<td>Yes</td>
<td>Edit</td>
</tr>
<tr class="odd">
<td>
<div class="blue dots"></div>
</td>
<td>Hitu</td>
<td>Bansal</td>
<td>mhshshsh-01</td>
<td>hbansal@smartlayer.ca</td>
<td>9417113388</td>
<td>Chandigarh</td>
<td>Chand</td>
<td>CH</td>
<td>25 Oct</td>
<td>Done</td>
<td>Yes</td>
<td>Edit</td>
</tr>
<tr class="even">
<td>
<div class="yellow dots"></div>
</td>
<td class="bordergreen">Hitu</td>
<td class="bordergreen">Bansal</td>
<td class="bordergreen">mhshshsh-01</td>
<td class="bordergreen">hbansal@smartlayer.ca</td>
<td class="bordergreen">9417113388</td>
<td class="bordergreen">Chandigarh</td>
<td class="bordergreen">Chand</td>
<td class="bordergreen">CH</td>
<td class="bordergreen">25 Oct</td>
<td class="bordergreen">Done</td>
<td>Yes</td>
<td>Save</td>
</tr>
<tr class="odd">
<td>
<div class="blue dots"></div>
</td>
<td>Hitu</td>
<td>Bansal</td>
<td>mhshshsh-01</td>
<td>hbansal@smartlayer.ca</td>
<td>9417113388</td>
<td>Chandigarh</td>
<td>Chand</td>
<td>CH</td>
<td>25 Oct</td>
<td>Done</td>
<td>Yes</td>
<td>Edit</td>
</tr>
<tr class="even">
<td>
<div class="yellow dots"></div>
</td>
<td>Hitu</td>
<td>Bansal</td>
<td>mhshshsh-01</td>
<td>hbansal@smartlayer.ca</td>
<td>9417113388</td>
<td>Chandigarh</td>
<td>Chand</td>
<td>CH</td>
<td>25 Oct</td>
<td>Done</td>
<td>Yes</td>
<td>Edit</td>
</tr>
<tr class="odd">
<td>
<div class="blue dots"></div>
</td>
<td>Hitu</td>
<td>Bansal</td>
<td>mhshshsh-01</td>
<td>hbansal@smartlayer.ca</td>
<td>9417113388</td>
<td>Chandigarh</td>
<td>Chand</td>
<td>CH</td>
<td>25 Oct</td>
<td>Done</td>
<td>Yes</td>
<td>Edit</td>
</tr>
<tr class="even">
<td>
<div class="yellow dots"></div>
</td>
<td>Hitu</td>
<td>Bansal</td>
<td>mhshshsh-01</td>
<td>hbansal@smartlayer.ca</td>
<td>9417113388</td>
<td>Chandigarh</td>
<td>Chand</td>
<td>CH</td>
<td>25 Oct</td>
<td>Done</td>
<td>Yes</td>
<td>Edit</td>
</tr>
<tr class="odd">
<td>
<div class="blue dots"></div>
</td>
<td>Hitu</td>
<td>Bansal</td>
<td>mhshshsh-01</td>
<td>hbansal@smartlayer.ca</td>
<td>9417113388</td>
<td>Chandigarh</td>
<td>Chand</td>
<td>CH</td>
<td>25 Oct</td>
<td>Done</td>
<td>Yes</td>
<td>Edit</td>
</tr>
<tr class="even">
<td>
<div class="yellow dots"></div>
</td>
<td>Hitu</td>
<td>Bansal</td>
<td>mhshshsh-01</td>
<td>hbansal@smartlayer.ca</td>
<td>9417113388</td>
<td>Chandigarh</td>
<td>Chand</td>
<td>CH</td>
<td>25 Oct</td>
<td>Done</td>
<td>Up-to-date</td>
<td>Edit</td>
</tr>
<tr class="odd">
<td>
<div class="blue dots"></div>
</td>
<td>Hitu</td>
<td>Bansal</td>
<td>mhshshsh-01</td>
<td>hbansal@smartlayer.ca</td>
<td>9417113388</td>
<td>Chandigarh</td>
<td>Chand</td>
<td>CH</td>
<td>25 Oct</td>
<td>Done</td>
<td>Yes</td>
<td>Edit</td>
</tr>
<tr class="even">
<td>
<div class="yellow dots"></div>
</td>
<td>Hitu</td>
<td>Bansal</td>
<td>mhshshsh-01</td>
<td>hbansal@smartlayer.ca</td>
<td>9417113388</td>
<td>Chandigarh</td>
<td>Chand</td>
<td>CH</td>
<td>25 Oct</td>
<td>Done</td>
<td>Up-to-date</td>
<td>Edit</td>
</tr>
</tbody>
</table>
<div>
<div class="col-lg-12 center"><span class="darkgreen">Messages:</span> <span class="green">654</span>
</div>
</div>
</div>
<!-- table finishes -->
帮我为我的表添加verticle滚动条并设置其结构。
感谢。