首页 > 其他分享 >Table表格的css样式代码详解 tableStyle.css

Table表格的css样式代码详解 tableStyle.css

时间:2022-12-11 02:22:05浏览次数:74  
标签:213 表格 tableStyle background Table table 1.34 css

原文地址:https://www.jb51.net/article/220293.htm

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

 

 

<html>
<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>
    </table>
</body>

</html>

 

标签:213,表格,tableStyle,background,Table,table,1.34,css
From: https://www.cnblogs.com/zhu4c4/p/16972761.html

相关文章

  • CSS固定定位与粘性定位4大企业级案例
    前面两篇文章为大家详细讲解了相对定位与绝对定位的应用场景和案例。如果想了解的可以在公众号里面查看去看。本小节我们学习下固定定位与粘性定位的应用场景和案例。 ......
  • postgresql/lightdb PL/pgSQL return setof和TABLE的区别及动态SQL执行
    在pg中,广泛的使用了表函数代替视图,返回集合有两种定义,setof和table。他们的区别在于table明确定义了字段名和类型,如下:CREATEFUNCTIONevents_by_type_1(text)RETURNSTABL......
  • Vue Vue-Router params 传参 为空 path定义参数 参数 param is not repeatable
    我在Vue-Router4.0.3版本上出现这个问题因为官方在2022年8月22日时废除了未定义的传参方式,所以必须使用定义的params。解决办法:在配置路由时:path路径上带上传值的key值......
  • 现代 CSS 之高阶图片渐隐消失术
    在过往,我们想要实现一个图片的渐隐消失。最常见的莫过于整体透明度的变化,像是这样:<divclass="img"></div>div{width:300px;height:300px;background:url(i......
  • vue table刷新单行数据
    1.给el-table加上标记方法<el-tablev-loading="loading":data="tagList1"@selection-change="handleSelectionChange1":row-class-name="tableRowClassName"> ta......
  • 在ubuntu下 service iptables start启动iptables失败
    尝试通过执行serviceiptablesstart启动iptables失败,提示iptables:unrecognizedservice。可以通过modprobeip_tables启动。补充:1、service可以控制系统服务(打开、......
  • 路由 rtable dst_entry 数据结构
    /*rt_flags是一组标志位,按目的入口查询的执行顺序:如果路由使用本地环回接口,则rt_flags上加标志RTCF_LOCAL,如果路由结果类型是广播,则加标志RTCF_BROADCAST和RTCF_LOCAL,......
  • WXSS/CSS萌新技巧Get——text-indent
    居家半个月兴起打算学习一下小程序开发,以此为契机注册了51博客,又被新人福利送鼠标垫所吸引(旧鼠标垫搬家时丢了),于是就从这里,开始学着写博客吧!text-indent的作用是给文本加上......
  • 你必须记住的30个CSS选择器?
    你学会了基本的id,class类选择器和descendant后代选择器,然后就觉得完事了吗?如果这样,你就会错过许多灵活运用CSS的机会。虽然本文提到的许多选择器都属于CSS3,并且只能在现代......
  • ant-design Table fixed 定位导致高度不一致(解决方案)
    <a-table:columns="columns":rowKey="record=>record.rowId":data-source="data":scroll="{x:true}":pagination='false'    当点击按钮编辑ta......