css实现一个自适应深色表格效果代码-html代码-BFW代码库

css实现一个自适应深色表格效果代码

代码语言：html

所属分类：表格

代码描述：css实现一个自适应深色表格效果代码，悬浮鼠标会醒目提醒

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        /*	
        	Side Navigation Menu V2, RWD
        	===================
        	Author: https://github.com/pablorgarcia
         */
        
        @charset "UTF-8";
        @import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,700);
        
        body {
          font-family: 'Open Sans', sans-serif;
          font-weight: 300;
          line-height: 1.42em;
          color:#A7A1AE;
          background-color:#1F2739;
        }
        
        h1 {
          font-size:3em; 
          font-weight: 300;
          line-height:1em;
          text-align: center;
          color: #4DC3FA;
        }
        
        h2 {
          font-size:1em; 
          font-weight: 300;
          text-align: center;
          display: block;
          line-height:1em;
          padding-bottom: 2em;
          color: #FB667A;
        }
        
        h2 a {
          font-weight: 700;
          text-transform: uppercase;
          color: #FB667A;
          text-decoration: none;
        }
        
        .blue { color: #185875; }
        .yellow { color: #FFF842; }
        
        .container th h1 {
        	  font-weight: bold;
        	  font-size: 1em;
          text-align: left;
          color: #185875;
        }
        
        .container td {
        	  font-weight: normal;
        	  font-size: 1em;
          -webkit-box-shadow: 0 2px 2px -2px #0E1119;
        	   -moz-box-shadow: 0 2px 2px -2px #0E1119;
        	        box-shadow: 0 2px 2px -2px #0E1119;
        }
        
        .container {
        	  text-align: left;
        	  overflow: hidden;
        	  width: 80%;
        	  margin: 0 auto;
          display: table;
          padding: 0 0 8em 0;
        }
        
        .container td, .container th {
        	  padding-bottom: 2%;
        	  padding-top: 2%;
          padding-left:2%;  
        }
        
        /* Background-color of the odd rows */
        .container tr:nth-child(odd) {
        	  background-color: #323C50;
        }
        
        /* Background-color of the even rows */
        .container tr:nth-child(even) {
        	  background-color: #2C3446;
        }
        
        .container th {
        	  background-color: #1F2739;
        }
        
        .container td:first-child { color: #FB667A; }
        
        .container tr:hover {
           backg.........完整代码请登录后点击上方下载按钮下载查看