推荐一个好看Table表格的css样式代码详解

漂亮的table表格样式css源码漂亮的table表格样式

源码

<head>
    <title></title>
    <style type="text/css">
        table
        {
            border-collapse: collapse;
            margin: 0 auto;
            text-align: center;
        }
        table td, table th
        {
            border: 1px solid #cad9ea;
            color: #666;
            height: 30px;
        }
        table thead th
        {
            background-color: #CCE8EB;
            width: 100px;
        }
        table tr:nth-child(odd)
        {
            background: #fff;
        }
        table tr:nth-child(even)
        {
            background: #F5FAFA;
        }
    </style>
</head>
<body>
    <table width="90%" class="table">
        <caption>
            <h2>
                车间能源消耗比例</h2>
        </caption>
        <thead>
            <tr>
                <th>
                    车间
                </th>
                <th>
                    产量
                </th>
                <th>
                    电量
                </th>
                <th>
                    单耗
                </th>
            </tr>
        </thead>
        <tr>
            <td>
                109
            </td>
            <td>
                13
            </td>
            <td>
                1.34
            </td>
            <td>
                213
            </td>
        </tr>
        <tr>
            <td>
                109
            </td>
            <td>
                13
            </td>
            <td>
                1.34
            </td>
            <td>
                213
            </td>
        </tr>
        <tr>
            <td>
                109
            </td>
            <td>
                13
            </td>
            <td>
                1.34
            </td>
            <td>
                213
            </td>
        </tr>
        <tr>
            <td>
                109
            </td>
            <td>
                13
            </td>
            <td>
                1.34
            </td>
            <td>
                213
            </td>
        </tr>
        <tr>
            <td>
                109
            </td>
            <td>
                13
            </td>
            <td>
                1.34
            </td>
            <td>
                213
            </td>
        </tr>
        <tr>
            <td>
                109
            </td>
            <td>
                13
            </td>
            <td>
                1.34
            </td>
            <td>
                213
            </td>
        </tr>
    </table>
</body>

</html>

到此这篇关于推荐一个好看Table表格的css样式代码详解的文章就介绍到这了,更多相关推荐一个好看Table表格的css样式内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Java AbstractMethodError原因案例详解

    背景 AbstractMethodError异常对于我来说还是比较不常遇见的,最近有幸遇到,并侥幸的解决了,在这里把此种场景剖析一番,进入正题,下面是AbstractMethodError在Java的异常机制中所处的位置: 现在明确了AbstractMethodError所具有的特性: 1.它是Error的子类,Error类及其子类都是被划分在非检查异常之列的,就是说这些异常不能在编译阶段被检查出来,只能在运行时才会触发. 2.通过API文档里面的解释大致得出的结论就是说A依赖于B,但是执行的时

  • C语言 OutputDebugString与格式化输出函数OutputDebugPrintf案例详解

    OutputDebugString属于windows API的,所以只要是包含了window.h这个头文件后就可以使用了.可以把调试信息输出到编译器的输出窗口,还可以用DbgView(本机或TCP远程)这样的工具查看,这样就可以脱离编译器了.   OutputDebugString 默认只能输入一个参数,不能像printf那样格式化输出,下面改造成类似printf函数的输出方式. #include <windows.h> #include <stdio.h> //#include

  • C# Console.WriteLine()用法案例详解

    以前用Console.WriteLine()的时候就只会用它直接输出string字符串,但后来发现它还有其它在有些场合下会十分方便的输出方法,这篇就记录一下这些方法的使用吧. 代码格式我就不写了,因为写了也不好理解,所以直接上示例了.  ① static void Main(string[] args) { int i = 6; string s = "输出"; Console.WriteLine("{0}还可以这样{1}哦.", i, s); Console.Wr

  • C语言中栈的两种实现方法详解

    目录 一.顺序栈 二.链式栈 总结 一.顺序栈 #include<stdio.h> #include<stdlib.h> #define maxsize 64 //定义栈 typedef struct { int data[maxsize]; int top; }sqstack,*sqslink; //设置栈空 void Clearstack(sqslink s) { s->top=-1; } //判断栈空 int Emptystack(sqslink s) { if (s-

  • C语言操作符基础知识图文详解

    目录 1.算术操作符 + - * / % 2.移位操作符 >> (右移操作符) <<(左移操作符) 左移操作符:<< 右移操作符:>> 3.位操作符 3.1 & 按位与 3.2 | 按位或 3.3 ^ 按位异或 3.4 ~ 按位取反 4.赋值操作符 = 5.逻辑操作符 5.1 ! 非 5.2 && 与 5.3 || 或 6.条件运算符 ? 7.单目操作符 7.1 ! 7.2 + 正值 7.3 - 负值 7.4 & 取地址 7.

  • VC使用TerminateProcess结束进程实例

    本文实例讲述了VC使用TerminateProcess结束进程的方法,分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: int KillProcess(LPCSTR pszClassName, LPCSTR pszWindowTitle) {     HANDLE hProcessHandle;     ULONG nProcessID;     HWND TheWindow;     TheWindow = ::FindWindow( NULL, pszWindowTitle )

  • C++ ostream用法案例详解

    概述 在 C++中,ostream表示输出流,英文"output stream"的简称.在 C++中常见的输出流对象就是标准输出流cout,很少自定义ostream的对象,更多的是直接使用cout.那么 ostream 有什么用呢,来看一个场景: class CPoint { public: CPoint(int x_,int y_):x(x_),y(y_){} int x,y; }; 这里定义了一个简单的类CPoint,如果我们实例化该类过后,想要打印对象的值: CPoint poi

  • C语言 TerminateProcess函数案例详解

    TerminateProcess 顾名思义,就是终止进程的意思. 是WindowsAPI的函数, 示例代码如下: // Demo.cpp : 定义控制台应用程序的入口点. //终止进程Demo #include "stdafx.h" using namespace std; //@param:dwpid:指定需要关闭的进程pid int CloseProcess(DWORD dwpid) { HANDLE hProcess = OpenProcess(PROCESS_TERMINATE

  • 推荐一个好看Table表格的css样式代码详解

    漂亮的table表格样式css源码漂亮的table表格样式 源码 <head> <title></title> <style type="text/css"> table { border-collapse: collapse; margin: 0 auto; text-align: center; } table td, table th { border: 1px solid #cad9ea; color: #666; height:

  • 一个通用的Java分页基类代码详解

    分页的基类 import java.util.List; /** * 分页显示的标准类,基本操作,是先给予-当前页数一共的数据条数-每页显示的条数, * 然后在初始化该类,得到总共页数,和开始序号和结束序号, * 然后数据库分页用到开始序号和结束序号,得到数据集合后赋值给该类的list属性, * * 然后把该类发送到jsp页面,进行访问 * @author admin * * @param <T> */ public class PageBean<T> { private int

  • JavaScript操作class和style样式代码详解

    废话不多说了,直接给大家贴js代码了,具体代码如下所示: <!doctype html> <html> <head> <meta charset="utf-"> <title>无标题文档</title> <style> .fontSize { font-size:px; } .fontWeight { font-weight:bold; } </style> </head> &l

  • jQuery实现获取及设置CSS样式操作详解

    本文实例讲述了jQuery实现获取及设置CSS样式操作.分享给大家供大家参考,具体如下: addClass():向被选元素添加一个或多个类 removeClass():从被选元素删除一个或多个类 toggleClass():对被选元素进行添加/删除类的切换操作 css():设置或返回被选元素的一个或多个样式属性 样式表实例: .important{ font-weight:bold; font-size:xx-large; } .blue{ color:blue; } addClass() <!

  • jQuery鼠标滑过横向时间轴样式(代码详解)

    每日分享效果,今天分享内容为:jQuery鼠标滑过横向时间轴样式 效果图: HTML代码: `<!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body> <div

  • 正则表达式替换table表格中的样式与空标记(保留rowspan与colspan)

    完整测试代码 <script> var str='<p>'; str='<table id="tblSort" cellspacing="0" helvetica="" sans=""><tr id="sdf"><td style="color:red" class="ok" colspan="8&quo

  • layui框架table 数据表格的方法级渲染详解

    如下所示: <table class="layui-table" lay-filter="demo11" id="test11"></table> //js 规范书写 var tst=table.render({ elem: '#test11' ,cols: [[ //标题栏 {checkbox: true} ,{field: 'pay_ct_time', title: '创建时间', width: 80} ,{field

  • CSS自定义滚动条样式案例详解

    CSS3自定义滚动条样式 -webkit-scrollbar 当内容超出容器时,容器会出现滚动条,其自带的滚动条有时无法满足我们审美要求,那么我们可以通过css伪类来实现对滚动条的自定义. 首先我们要了解滚动条.滚动条从外观来看是由两部分组成:1,可以滑动的部分,我们叫它滑块2,滚动条的轨道,即滑块的轨道,一般来说滑块的颜色比轨道的颜色深. 滚动条的css样式主要有三部分组成: ::-webkit-scrollbar   定义了滚动条整体的样式: ::-webkit-scrollbar-thum

  • JavaScript实现生成动态表格和动态效果的方法详解

    今天上午完成了Vue实现一个表格的动态样式,那么JavaScript代码能不能实现同样的效果呢?这样也可以学习一下JavaScript的语法,晚上试了一下,完全可以,效果一模一样. <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="X-UA-Compatible" content="text/html; charset=utf-8">

  • Python实现向PPT中插入表格与图片的方法详解

    目录 插入表格 插入图片 上一章节学习了如何在 PPT 中添加段落以及自定义段落(书写段落的内容以及样式的调整),今天的章节将学习在 PPT 中插入表格与图片以及在表格中插入内容. 废话不多说了,直接进入主题. 插入表格 首先还是要生成 PPT 对象: ppt = Presentation() 通过 Presentation() 实例化一个 ppt 对象(Presentation 可以通过 python-pptx 直接拿过来使用) 选择布局: layout = ppt.slide_layout[

随机推荐