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>
  • 相关阅读:
    关于OC中.m文件下实现私有变量的方法,在.h文件下实现公有变量的方法
    mac中安装homebrew
    ios架构
    github命令记录
    Unity 游戏框架搭建 MonoBehaviour单例的模板
    Unity 游戏框架搭建 单例的模板
    unity 单列
    简单工厂与工厂
    NGUI动态播放视频
    在一个GameObject上进行多个AudioSource的控制
  • 原文地址:https://www.cnblogs.com/DZzzz/p/10989011.html
Copyright © 2011-2022 走看看