zoukankan      html  css  js  c++  java
  • 表格

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

    css:

    .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;
    css
  • 相关阅读:
    ModuleNotFoundError: No module named 'babel' 解决办法
    linux修改时间
    Ubuntu 18.04 安装 odoo12 源码版
    开源ERP框架Odoo学习
    浅谈我对DDD领域驱动设计的理解(转)
    一步步带你做vue后台管理框架
    一步一步使用ABP框架搭建正式项目系列教程
    C#编写好的windows服务,在本机上运行很好,考到其他电脑运行出现“错误1053: 服务没有及时响应启动或控制请求”的解决办法
    公用表表达示展BOM示例
    sqlserver 2005新功能
  • 原文地址:https://www.cnblogs.com/Secretmm/p/5676291.html
Copyright © 2011-2022 走看看