表格

table的创建

html:

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

.tableone{
    margin: 0%;
    padding: 0%;
    height: 550px;
    width: 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;