zoukankan      html  css  js  c++  java
  • 《table样式》

    table {
            margin:auto;
            *border-collapse: collapse; /* IE7 和更低的浏览器 */
            border-spacing: 0;
            80%;
        }
        /*加在table标签里*/
        .bordered {
            border: solid #ccc 1px;
            -moz-border-radius: 2px;
            -webkit-border-radius: 2px;
            border-radius: 2px;
            -webkit-box-shadow: 0 1px 1px #ccc;
            -moz-box-shadow: 0 1px 1px #ccc;
            box-shadow: 0 1px 1px #ccc;
        }

            .bordered tr:hover {
                background: #fbf8e9;
                -o-transition: all 0.1s ease-in-out;
                -webkit-transition: all 0.1s ease-in-out;
                -moz-transition: all 0.1s ease-in-out;
                -ms-transition: all 0.1s ease-in-out;
                transition: all 0.1s ease-in-out;
            }

            .bordered td, .bordered th {
                border-left: 1px solid #ccc;
                border-top: 1px solid #ccc;
                padding: 10px;
                text-align: center;
            }

            .bordered th {
                background-color: #dce9f9;
                background-image: -webkit-gradient(linear, left top, left bottom, from(#ebf3fc), to(#dce9f9));
                background-image: -webkit-linear-gradient(top, #ebf3fc, #dce9f9);
                background-image: -moz-linear-gradient(top, #ebf3fc, #dce9f9);
                background-image: -ms-linear-gradient(top, #ebf3fc, #dce9f9);
                background-image: -o-linear-gradient(top, #ebf3fc, #dce9f9);
                background-image: linear-gradient(top, #ebf3fc, #dce9f9);
                -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
                -moz-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
                box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
                border-top: none;
                text-shadow: 0 1px 0 rgba(255,255,255,.5);
            }

                .bordered td:first-child, .bordered th:first-child {
                    border-left: none;
                }

                .bordered th:first-child {
                    -moz-border-radius: 6px 0 0 0;
                    -webkit-border-radius: 6px 0 0 0;
                    border-radius: 6px 0 0 0;
                }

                .bordered th:last-child {
                    -moz-border-radius: 0 6px 0 0;
                    -webkit-border-radius: 0 6px 0 0;
                    border-radius: 0 6px 0 0;
                }

                .bordered th:only-child {
                    -moz-border-radius: 6px 6px 0 0;
                    -webkit-border-radius: 6px 6px 0 0;
                    border-radius: 6px 6px 0 0;
                }

            .bordered tr:last-child td:first-child {
                -moz-border-radius: 0 0 0 6px;
                -webkit-border-radius: 0 0 0 6px;
                border-radius: 0 0 0 6px;
            }

            .bordered tr:last-child td:last-child {
                -moz-border-radius: 0 0 6px 0;
                -webkit-border-radius: 0 0 6px 0;
                border-radius: 0 0 6px 0;
            }

    前端-语言
  • 相关阅读:
    java8学习
    linux常用命令
    window操作系统分区
    java8特性
    mysql索引本质
    红黑树
    http请求传参问题解决
    老王说架构
    从URL到看到网页的过程
    RabbitMQ如何工作和RabbitMQ核心概念
  • 原文地址:https://www.cnblogs.com/beesky520/p/3912312.html
Copyright © 2011-2022 走看看