table的创建
html:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<table class="tableone"> <thead> <tr> <th>可上课时间</th> <th>星期一</th> <th>星期二</th> <th>星期三</th> <th>星期四</th> <th>星期五</th> <th>星期六</th> <th>星期日</th> </tr> </thead> <tbody> <tr> <th>8:00~9:00</th> <td><input type="checkbox"id="a1" value="1" class="checkone"></td> <td><input type="checkbox"id="a2" value="1" class="checkone"></td> <td><input type="checkbox"id="a3" value="1" class="checkone"></td> <td><input type="checkbox"id="a4" value="1" class="checkone"></td> <td><input type="checkbox"id="a5" value="1" class="checkone"></td> <td><input type="checkbox"id="a6" value="1" class="checkone"></td> <td><input type="checkbox"id="a7" value="1" class="checkone"></td> </tr> <tr> <th>9:00~10:00</th> <td><input type="checkbox"id="a1" value="1" class="checkone"></td> <td><input type="checkbox"id="a2" value="1" class="checkone"></td> <td><input type="checkbox"id="a3" value="1" class="checkone"></td> <td><input type="checkbox"id="a4" value="1" class="checkone"></td> <td><input type="checkbox"id="a5" value="1" class="checkone"></td> <td><input type="checkbox"id="a6" value="1" class="checkone"></td> <td><input type="checkbox"id="a7" value="1" class="checkone"></td> </tr> <tr> <th>10:00~11:00</th> <td><input type="checkbox"id="a1" value="1" class="checkone"></td> <td><input type="checkbox"id="a2" value="1" class="checkone"></td> <td><input type="checkbox"id="a3" value="1" class="checkone"></td> <td><input type="checkbox"id="a4" value="1" class="checkone"></td> <td><input type="checkbox"id="a5" value="1" class="checkone"></td> <td><input type="checkbox"id="a6" value="1" class="checkone"></td> <td><input type="checkbox"id="a7" value="1" class="checkone"></td> </tr> <tr> <th>11:00~12:00</th> <td><input type="checkbox"id="a1" value="1" class="checkone"></td> <td><input type="checkbox"id="a2" value="1" class="checkone"></td> <td><input type="checkbox"id="a3" value="1" class="checkone"></td> <td><input type="checkbox"id="a4" value="1" class="checkone"></td> <td><input type="checkbox"id="a5" value="1" class="checkone"></td> <td><input type="checkbox"id="a6" value="1" class="checkone"></td> <td><input type="checkbox"id="a7" value="1" class="checkone"></td> </tr> <tr> <th>12:00~13:00</th> <td><input type="checkbox"id="a1" value="1" class="checkone"></td> <td><input type="checkbox"id="a2" value="1" class="checkone"></td> <td><input type="checkbox"id="a3" value="1" class="checkone"></td> <td><input type="checkbox"id="a4" value="1" class="checkone"></td> <td><input type="checkbox"id="a5" value="1" class="checkone"></td> <td><input type="checkbox"id="a6" value="1" class="checkone"></td> <td><input type="checkbox"id="a7" value="1" class="checkone"></td> </tr> <tr> <th>13:00~14:00</th> <td><input type="checkbox"id="a1" value="1" class="checkone"></td> <td><input type="checkbox"id="a2" value="1" class="checkone"></td> <td><input type="checkbox"id="a3" value="1" class="checkone"></td> <td><input type="checkbox"id="a4" value="1" class="checkone"></td> <td><input type="checkbox"id="a5" value="1" class="checkone"></td> <td><input type="checkbox"id="a6" value="1" class="checkone"></td> <td><input type="checkbox"id="a7" value="1" class="checkone"></td> </tr> <tr> <th>14:00~15:00</th> <td><input type="checkbox"id="a1" value="1" class="checkone"></td> <td><input type="checkbox"id="a2" value="1" class="checkone"></td> <td><input type="checkbox"id="a3" value="1" class="checkone"></td> <td><input type="checkbox"id="a4" value="1" class="checkone"></td> <td><input type="checkbox"id="a5" value="1" class="checkone"></td> <td><input type="checkbox"id="a6" value="1" class="checkone"></td> <td><input type="checkbox"id="a7" value="1" class="checkone"></td> </tr> <tr> <th>15:00~16:00</th> <td><input type="checkbox"id="a1" value="1" class="checkone"></td> <td><input type="checkbox"id="a2" value="1" class="checkone"></td> <td><input type="checkbox"id="a3" value="1" class="checkone"></td> <td><input type="checkbox"id="a4" value="1" class="checkone"></td> <td><input type="checkbox"id="a5" value="1" class="checkone"></td> <td><input type="checkbox"id="a6" value="1" class="checkone"></td> <td><input type="checkbox"id="a7" value="1" class="checkone"></td> </tr> <tr> <th>16:00~17:00</th> <td><input type="checkbox"id="a1" value="1" class="checkone"></td> <td><input type="checkbox"id="a2" value="1" class="checkone"></td> <td><input type="checkbox"id="a3" value="1" class="checkone"></td> <td><input type="checkbox"id="a4" value="1" class="checkone"></td> <td><input type="checkbox"id="a5" value="1" class="checkone"></td> <td><input type="checkbox"id="a6" value="1" class="checkone"></td> <td><input type="checkbox"id="a7" value="1" class="checkone"></td> </tr> <tr> <th>17:00~18:00</th> <td><input type="checkbox"id="a1" value="1" class="checkone"></td> <td><input type="checkbox"id="a2" value="1" class="checkone"></td> <td><input type="checkbox"id="a3" value="1" class="checkone"></td> <td><input type="checkbox"id="a4" value="1" class="checkone"></td> <td><input type="checkbox"id="a5" value="1" class="checkone"></td> <td><input type="checkbox"id="a6" value="1" class="checkone"></td> <td><input type="checkbox"id="a7" value="1" class="checkone"></td> </tr> <tr> <th>18:00~19:00</th> <td><input type="checkbox"id="a1" value="1" class="checkone"></td> <td><input type="checkbox"id="a2" value="1" class="checkone"></td> <td><input type="checkbox"id="a3" value="1" class="checkone"></td> <td><input type="checkbox"id="a4" value="1" class="checkone"></td> <td><input type="checkbox"id="a5" value="1" class="checkone"></td> <td><input type="checkbox"id="a6" value="1" class="checkone"></td> <td><input type="checkbox"id="a7" value="1" class="checkone"></td> </tr> <tr> <th>19:00~20:00</th> <td><input type="checkbox"id="a1" value="1" class="checkone"></td> <td><input type="checkbox"id="a2" value="1" class="checkone"></td> <td><input type="checkbox"id="a3" value="1" class="checkone"></td> <td><input type="checkbox"id="a4" value="1" class="checkone"></td> <td><input type="checkbox"id="a5" value="1" class="checkone"></td> <td><input type="checkbox"id="a6" value="1" class="checkone"></td> <td><input type="checkbox"id="a7" value="1" class="checkone"></td> </tr> <tr> <th>20:00~21:00</th> <td><input type="checkbox"id="a1" value="1" class="checkone"></td> <td><input type="checkbox"id="a2" value="1" class="checkone"></td> <td><input type="checkbox"id="a3" value="1" class="checkone"></td> <td><input type="checkbox"id="a4" value="1" class="checkone"></td> <td><input type="checkbox"id="a5" value="1" class="checkone"></td> <td><input type="checkbox"id="a6" value="1" class="checkone"></td> <td><input type="checkbox"id="a7" value="1" class="checkone"></td> </tr> <tr> <td colspan="8"> <button type="button" class="btn btn-primary">确定</button> </td> </tr> </tbody> </table>
css:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
.tableone{
margin: 0%;
padding: 0%;
height: 550px;
850px;
border: 1px solid #dddddd;
-webkit-border-radius: 20px;
font-size: 14px;
font-family: "微软雅黑";
}
.tableone th{
text-align: center;
margin: 8px;
padding: 8px;
background: #fff;
font-weight: 400;
}
.tableone tr{
border: 1px solid #dddddd;
}
.tableone td{
border: 1px solid #dddddd;
}
.tableone tr:nth-child(even) {
background: #FFF;
}
.tableone tr:nth-child(odd) {
background: #fbfbfb;