zoukankan      html  css  js  c++  java
  • 大公司常见表格样式

    贴上效果图:

    贴上代码:

    <!doctype html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>大公司常见表格</title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
    
    
            .bt-table {
                padding: 20px;
            }
            td {
                padding: 10px;
            }
            #tb1 tr {
                background-color: #fff;
                font: normal 14px/180% Georgia,Arial,Helvetica,sans-serif;
            }
    
            /*奇数行样式*/
            #tb1 tr:nth-child(even) {
                background-color: #dee1e6;
            }
    
            #tb1 thead tr {
                background-color: #dee1e6;
            }
            #tb1 thead tr td{
               border: 1px solid #b6b4b6;
            }
            #tb1 thead tr td{
               border-left: none;
            }
            #tb1 thead tr td:first-child{
               border-left: 1px solid #b6b4b6;
            }
            #tb1 tbody tr td{
               border-bottom: 1px solid #b6b4b6;
            }
    
           
        </style>
    </head>
    
    <body>
        <div class="bt-table">
            <table id="tb1"   width="100%" cellspacing="0">
                <thead>
                    <tr>
                        <td width="50">序列</td>
                        <td>主题</td>
                        <td>内容</td>
                        <td>链接</td>
                        <td width="50"> 操作</td>
                    </tr>
                </thead>
                <tbody >
                    <tr>
                        <td>1</td>
                        <td>Sportswomen</td>
                        <td>Achievement:After a 12-year wait, China's Women's Volleyball Team re-gained its spot on top of
                            dias, winning gold at the 2016 Summer Olympics. The team are now regarded as national heroes,
                            proudly carrying the flag of China's Olympic glory that first flew 30 years ago.</td>
                        <td>Persistence
    
                        </td>
    
                        <td>删除</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>Profession:Model</td>
                        <td>Achievement:As the first Chinese model to walk the Victoria's Secret runway and the first Asian
                            model to make Forbes magazine's annual highest-paid models list, Liu has led three other Chinese
                            girls to the 2016 Victoria's Secret Fashion Show, bringing a wave of Chinese chic to the fashion
                            world.
                        </td>
                        <td>Persistence</td>
    
                        <td>删除</td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td>Profession:Model</td>
                        <td>Achievement:As the first Chinese model to walk the Victoria's Secret runway and the first Asian
                            model to make Forbes magazine's annual highest-paid models list, Liu has led three other Chinese
                            girls to the 2016 Victoria's Secret Fashion Show, bringing a wave of Chinese chic to the fashion
                            world.
                        </td>
                        <td>Persistence</td>
    
                        <td>删除</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </body>
    
    </html>
  • 相关阅读:
    SpringBoot多数据源启动器
    数据结构模拟器
    mysql5.7查询今天、昨天、本周、上周、本月、上月数据
    SpringBoot项目本地可以发送邮件,部署到阿里云服务器发送邮件失败的解决方法
    Centos7搭建Maven私服-Nexus3.19.1-01
    Linux中部署jar包并指定日志输出文件
    ThreadLocal是什么?谈谈你对他的理解
    leetcode-双指针遍历
    不要再纠结css/js/html有没有必要放在WEB-INF下了
    数据库的表的字段名称与实体类(pojo)不对应解决方案
  • 原文地址:https://www.cnblogs.com/DZzzz/p/10989011.html
Copyright © 2011-2022 走看看