精美的表格是前端开发用到的一个组件,很多时候我们利用复杂的页面style代码,来生成这样的表格,造成了页面的修改性和可读性都非常差。这里推荐直接使用css来产生一个细线表格。 
使用方法也很简单: 
第一:导入table.css

  1. <link rel="stylesheet" type="text/css" href="./css/table.css"/>

第二:套用格式

  1. <table class="table">

您只需要给table设置样式class="table"即可,不需要对任何的tr,td做操作。您也可以写成<table class="table" style="width:600px"> style="width:600px"是为了更灵活的控制表格的宽度,如果直接写到table.css里自然也没有问题;如果您打算让td有有背景颜色,只需要设置td的样式class="color"即可。当然其实可以在css里面利用表达式直接设置成隔行变色,不过那样做会降低页面的效率,不推荐在css中使用表达式。

如果大家想对样式进行微调,只需要调整table.css即可,不需要改任何的页面html代码。如果大家想修改边框的颜色,请在table.css中找到色值:#ADD8E6,然后全部替换成自己想要的色值即可。附件是一个具体的例子。

table.css源码:

    1. /*表格样式。*/
    2. .table {
    3. width:100%;
    4. padding: 0px;
    5. margin: 0px;
    6. font-family:Arial, Tahoma, Verdana, Sans-Serif,宋体;
    7. border-left:1px solid #ADD8E6;
    8. border-collapse:collapse;
    9. }
    10. /*表头样式。*/
    11. .table th {
    12. font-size:12px;
    13. font-weight:600;
    14. color: #303030;
    15. border-right: 1px solid #ADD8E6;
    16. border-bottom: 1px solid #ADD8E6;
    17. border-top: 1px solid #ADD8E6;
    18. letter-spacing: 2px;
    19. text-align: left;
    20. padding: 10px 0px 10px 0px;
    21. background: url(../images/tablehdbg.png);
    22. white-space:nowrap;
    23. text-align:center;
    24. overflow: hidden;
    25. }
    26. /*单元格样式。*/
    27. .table td {
    28. border-right: 1px solid #ADD8E6;
    29. border-bottom: 1px solid #ADD8E6;
    30. background: #fff;
    31. font-size:12px;
    32. padding: 3px 3px 3px 6px;
    33. color: #303030;
    34. word-break:break-all;
    35. word-wrap:break-word;
    36. white-space:normal;
    37. }
    38. /*蓝色单元格样式,主要用于隔行变色。*/
    39. .table td.color{
    40. background:#edf7f9;
    41. }
    42. /*表格中超级链接样式。*/
    43. .table td a:link{
    44. font-weight:400 ;
    45. color:#2259D7 ;
    46. text-decoration:none  ;
    47. word-break:break-all;
    48. word-wrap:break-word;
    49. white-space:normal;
    50. }
    51. .table td a:visited {
    52. font-weight:400 ;
    53. color:#2259D7 ;
    54. text-decoration:none  ;
    55. word-break:break-all;
    56. word-wrap:break-word;
    57. white-space:normal;
    58. }
    59. .table td a:hover {
    60. font-weight:400 ;
    61. text-decoration:underline ;
    62. color: #303030;
    63. word-break:break-all;
    64. word-wrap:break-word;
    65. white-space:normal;
    66. }
    67. .table td a:active {
    68. font-weight:400 ;
    69. text-decoration:none  ;
    70. color:#2259D7 ;
    71. word-break:break-all;
    72. word-wrap:break-word;
    73. white-space:normal;
    74. }

利用CSS生成精美细线Table表格的更多相关文章

  1. [转]CSS如何设置html table表格边框样式

    原文地址:http://www.divcss5.com/wenji/w503.shtml 对table设置css样式边框,分为几种情况: 1.只对table设置边框 2.对td设置边框 3.对tabl ...

  2. Html Table用JS导出excel格式问题 导出EXCEL后单元格里的000412341234会变成412341234 7-14 会变成 2018-7-14(7月14) 自定义格式 web利用table表格生成excel格式问题 js导出excel增加表头、mso-number-format定义数据格式 数字输出格式转换 mso-number-format:"\@"

    Html Table用JS导出excel格式问题 我在网上找的JS把HTML Tabel导出成EXCEL.但是如果Table里的数字内容为0开的的导成Excel后会自动删除0,我想以text的格式写入 ...

  3. Java利用poi生成word(包含插入图片,动态表格,行合并)

    转(小改): Java利用poi生成word(包含插入图片,动态表格,行合并) 2018年12月20日 09:06:51 wjw_11093010 阅读数:70 Java利用poi生成word(包含插 ...

  4. jquery 生成table表格 部分代码

    想生成上面这样的table表格先看返回数据格式 <div id="create_img_tab"></div> window.onload = functi ...

  5. 将Highcharts图表数据生成Table表格

    有的时候,我们不仅仅需要漂亮的统计图来显示统计结果,还需要在统计图下方一个表格可以更加直观的展现各类数据.既然统计图都显示出来了,那我们可以根据统计图的各元素生成表格了. 首先,先显示统计图. Htm ...

  6. java:HTML(table表格,ul列表)和CSS(导入.css文件,三种定义颜色方式,三种样式选择器,a标签属性顺序,)

    1.重点掌握: html: 1.form表单:input,checkbox,seelct,radio,button,submit 2.table表格:thead-->tr-->th;tbo ...

  7. table表格,让thead固定,tbody有滚动条,关键是都对齐的纯css写法。

    找了好久才找到一篇可以简单粗暴就能用的,所以拿过来算是收藏了.里面有一个css2里的命令是我没用过的也是这里面关键的:table-layout:fixed; 原理很简单,有爱研究的童鞋可以去css官网 ...

  8. 利用CSS边框合并属性打造table细边框

    CSS代码: <style> table{ border-collapse: collapse;/* 边框合并属性 */ width:200px; } th{ border: 1px so ...

  9. display:table 表格布局

    table 布局最大的特点 1.同行等高 2.宽度自动调节   那么table-cell是不是具备这个特点呢?答案是yes,为什么呢?css中有一个有意思的规则“创建匿名表格元素”.   拿table ...

随机推荐

  1. [Elasticsearch] 向已存在的索引中加入自己定义filter/analyzer

    问题描写叙述 随着应用的不断升级,索引中的类型也会越来越多,新添加的类型中势必会使用到一些自己定义的Analyzer.可是通过_settings端点的更新API不能直接在已经存在的索引上使用. 在se ...

  2. 公司交换机arp 绑定操作

    1.首先登入:192.168.1.1 2.sys 3.dis arp | inc 192.168.1.49(查看该ip绑定情况) 4.undo arp 192.168.1.49(不绑定命令)

  3. <a>标签实现锚点跳跃,<a>标签实现href不跳跃另外加事件(ref传参)

    1.锚点跳跃 HTML: <div class="page_title" id="maodian"> <h1>客房节日价格管理</ ...

  4. 查看Linux磁盘空间大小命令

    发表于:2012-09-17 10:25   查看Linux磁盘空间大小 一.df 命令: df 是来自于coreutils 软件包,系统安装时,就自带的:我们通过这个命令可以查看磁盘的使用情况以及文 ...

  5. 记一次解决layui 的bug - layer.open 与 layui渲染问题

    场景是这样的,通过layer打开一个弹窗,里面放置一个表单,表单是用layui来渲染的. 当弹窗完成之后,我需要渲染表单中的一些内容.譬如laydate. layer.open({ type: 1, ...

  6. connect: Network is unreachable解決方法

    connect: Network is unreachable解決方法   解決方式:請確認ifcfg-eth0檔案設定 指令如下:   vi /etc/sysconfig/network-scrip ...

  7. SQL Server 2008、SQL Server 2008R2 自动备份数据库

    让SQL Server 2008自动备份数据库,需要建立一个SQL Server作业,并启动SQL Server代理,使该作业定期运行. 具体来说,可以按以下步骤进行: 一.打开SQL Server ...

  8. 对象.delegate=self的理解

    整理自:http://www.cocoachina.com/ask/questions/show/87430 各位大神,对象.delegate=self是啥意思,委托的意思不就是自己的任务交给其他人去 ...

  9. 线程相关函数(3)-pthread_detach()将某个线程设成分离态

    #include <pthread.h>int pthread_detach(pthread_t tid); pthread_t tid: 分离线程的tid返回值:成功返回0,失败返回错误 ...

  10. 进程控制函数(3)-getsid()和setsid()获取当前会话和建立新会话

    pid_t setsid(void) 1.调用进程不能是进程组组长,该进程变成新会话首进程(session header) 2.该进程成为一个新进程组的组长进程. 3.需有root权限(ubuntu不 ...