精美的表格是前端开发用到的一个组件,很多时候我们利用复杂的页面style代码,来生成这样的表格,造成了页面的修改性和可读性都非常差。这里推荐直接使用css来产生一个细线表格,如下图:
使用方法也很简单:
第一:导入table.css
<link rel="stylesheet" type="text/css" href="./css/table.css"/>
第二:套用格式
<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源码:
/*表格样式。*/
.table {
width:100%;
padding: 0px;
margin: 0px;
font-family:Arial, Tahoma, Verdana, Sans-Serif,宋体;
border-left:1px solid #ADD8E6;
border-collapse:collapse;
}
/*表头样式。*/
.table th {
font-size:12px;
font-weight:600;
color: #303030;
border-right: 1px solid #ADD8E6;
border-bottom: 1px solid #ADD8E6;
border-top: 1px solid #ADD8E6;
letter-spacing: 2px;
text-align: left;
padding: 10px 0px 10px 0px;
background: url(../images/tablehdbg.png);
white-space:nowrap;
text-align:center;
overflow: hidden;
}
/*单元格样式。*/
.table td {
border-right: 1px solid #ADD8E6;
border-bottom: 1px solid #ADD8E6;
background: #fff;
font-size:12px;
padding: 3px 3px 3px 6px;
color: #303030;
word-break:break-all;
word-wrap:break-word;
white-space:normal;
}
/*蓝色单元格样式,主要用于隔行变色。*/
.table td.color{
background:#edf7f9;
}
/*表格中超级链接样式。*/
.table td a:link{
font-weight:400 ;
color:#2259D7 ;
text-decoration:none ;
word-break:break-all;
word-wrap:break-word;
white-space:normal;
}
.table td a:visited {
font-weight:400 ;
color:#2259D7 ;
text-decoration:none ;
word-break:break-all;
word-wrap:break-word;
white-space:normal;
}
.table td a:hover {
font-weight:400 ;
text-decoration:underline ;
color: #303030;
word-break:break-all;
word-wrap:break-word;
white-space:normal;
}
.table td a:active {
font-weight:400 ;
text-decoration:none ;
color:#2259D7 ;
word-break:break-all;
word-wrap:break-word;
white-space:normal;
}
文章地址:
http://javapub.iteye.com/blog/733910
分享到:
相关推荐
【CSS生成精美细线Table表格】 在网页设计中,创建美观且易于阅读的表格是至关重要的。传统的HTML表格往往需要大量的内联样式或者复杂的内嵌CSS代码来实现理想的效果,这不仅使得代码难以维护,还降低了页面的可读性...
总之,利用CSS控制表格`<table>`的交替颜色是一种简单而有效的方法,它能够显著提升用户界面的可用性和美观度。通过灵活运用CSS选择器和属性,开发者可以根据具体需求定制出既实用又吸引人的表格样式。
网络上收集的css table样式 好看table样式 好看的CSS——Table样式表
table表格,让thead固定,tbody有滚动条,关键是都对齐的纯css写法。table表格,让thead固定,tbody有滚动条,关键是都对齐的纯css写法。table表格,让thead固定,tbody有滚动条,关键是都对齐的纯css写法。table...
在CSS中,制作细线表格是一项常见的任务,它可以使数据展示更加清晰且美观。下面将详细介绍如何使用CSS来优化和创建细线表格,以及其中涉及的关键属性。 首先,要实现细线表格,一个非常关键的属性是`border-...
效果描述: 你是否还在为你的网页中复杂而又丑陋的表格而烦恼? 往往很多默认的表格都不好看,而样式又比较难以控制 ... 今天懒人站长特意整理了... 1、head中的css样式复制到你的样式表中即可实现漂亮的table效果
在创建精美表格时,我们可以利用CSS来定义表格的边框、颜色、字体、对齐方式、背景图像等,以提升表格的视觉吸引力。例如,通过设置`border-collapse`属性可以合并单元格边框,`text-align`调整文本对齐,`...
css动画的一个应用,与此前的css走马灯同样的内容。只是一次不同的应用,具体实现如下 序号 姓名 年龄 性别 专业 </ul>
而在文章中没有图片时,我们可以使用一张默认的图,总是搞这些默认的图不是很好看,这时我们可以用css来生成文章标题首字母的头像为图片,这样会不会看起来很美观,那么如何利用css生成首字母文字头像? 利用css生成...
利用CSS Flexbox布局模块,这款表格可以灵活调整列宽,实现自适应布局。同时,Flexbox也使得行内元素的对齐和间隔控制更为简单。 7. **Zurb Foundation Tables** Zurb Foundation是另一款流行的前端框架,其表格...
"利用JS+CSS实现滚动表格数据展示"是一个常见的需求,它可以帮助用户逐行浏览大量的信息,而无需手动调整窗口大小。下面将详细介绍如何通过JavaScript(JS)和层叠样式表(CSS)来实现这一功能。 首先,我们需要...
本主题聚焦于如何使用CSS来控制表格的样式,以实现“精美的”视觉效果。表格在网页中常用于展示数据,如报告、统计数据或产品目录,而通过恰当的CSS应用,我们可以让这些表格更加吸引人,提高用户体验。 1. **基础...
"JS+CSS的table表格特效"是一个利用JavaScript(JS)和层叠样式表(CSS)来增强HTML表格功能的例子,旨在提高用户体验并增加交互性。在这个项目中,我们可以看到几个关键的技术点: 1. **复选框全选**:这是表格中...
在网页设计领域,布局方式的发展经历了从表格(Table)到层(Div)+CSS的转变。"Table转div+css工具"就是专为此目的而设计的一款实用软件,它能够帮助开发者将原有的基于表格的HTML代码转换成使用Div和CSS进行布局的...
在网页设计中,CSS(Cascading Style Sheets)是一种用于控制网页元素呈现样式的语言,而表格(Table)则是组织数据的重要方式。本教程将详细讲解如何使用纯CSS来制作一个人口统计表格的样式布局。 首先,我们需要...
下面我们将详细探讨如何利用CSS来创建一个具有Excel效果的表格。 首先,我们需要一个基本的HTML结构来定义表格。通常,`<table>`元素是创建表格的基础,它包含`<thead>`(表头)、`<tbody>`(主体)和`<tfoot>`...