`
Angelialily
  • 浏览: 241628 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

一个很好的CSS Table Style

    博客分类:
  • Css
阅读更多
.tab{

width: 100%;

margin:0;

padding:0;

font-family: "Trebuchet MS", Trebuchet, Arial, sans-serif;

color: #1c5d79;

border-top:  1px #c2c2c2;

border-bottom:  1px #c2c2c2;
   
    border-left:  1px #c2c2c2;

border-right:  1px #c2c2c2;

border-collapse: collapse;

}

.tab caption {

margin:0;

padding:0;

background: #f3f3f3;

height: 40px;

line-height: 40px;

text-indent: 28px;

font-family: "Trebuchet MS", Trebuchet, Arial, sans-serif;

font-size: 14px;

font-weight: bold;

color: #555d6d;

text-align: left;

letter-spacing: 3px;

border-top: dashed 1px #c2c2c2;

border-bottom: dashed 1px #c2c2c2;
   

}



/* HEAD */



.tab thead {

background-color: #FFFFFF;

border: none;

}

.tab thead tr th {

background-image:url("/lottery/img/table/bg.gif");

height: 22px;

line-height: 22px;

text-align: center;

color: #1c5d79;

background-repeat : repeat-x;

border-left:solid 1px #326E87;

border-right:solid 1px #326E87;

border-bottom:solid 1px #326E87;

border-collapse: collapse;

font-size: 12px;

}



/* BODY */

.tab tbody tr {

background: #f3f3f3;

font-size: 13px;

height: 12px;

line-height: 12px;

text-align: center;

event:expression(
onmouseover = function(){this.style.backgroundColor = '#E9F5FF';},
onmouseout = function(){this.style.backgroundColor = '#f3f3f3';}
)

}

.tab tbody tr.odd {

background: #F0FFFF;

}

.tab tbody tr:hover, .tab tbody tr.odd:hover {

background: #ffffff;

}

.tab tbody tr th,.tab tbody tr td {

padding: 6px;

border: solid 1px #326e87;

}

.tab tbody tr th {

font-family: "Trebuchet MS", Trebuchet, Arial, sans-serif;

font-size: 12px;

padding: 6px;

text-align: center;

font-weight: bold;

color: #FFFFFF;

border-bottom: solid 1px white;

}

.tab tbody tr th:hover {

background: #ffffff;



}



/* LINKS */



.tab a{

color: gray;

text-decoration: none;

font-size: 13px;

border-bottom: solid 1px white;

}

.tab a:hover {

color: blue;

border-bottom: none;

}



/* FOOTER */



.tab tfoot {

background: #f3f3f3;

height: 24px;

line-height: 24px;

font-family: "Trebuchet MS", Trebuchet, Arial, sans-serif;

font-size: 12px;

/*font-weight: bold;*/

color: #555d6d;

text-align: center;

letter-spacing: 3px;

border-top: solid 2px #326e87;

border-bottom: dashed 1px #c2c2c2;

}

.tab tfoot tr th,.tab tfoot tr td {

/*padding: .1em .6em;*/



}

.tab tfoot tr th {

border-top: solid 1px #326e87;

}

.tab tfoot tr td {

/**text-align: right;**/

}
  • 大小: 833 Bytes
分享到:
评论

相关推荐

    CSS样式Table[3] - practical-css3-tables-with-rounded-corners-demo

    要创建一个带有圆角的表格,首先需要将表格的边框样式设置为实线,然后为`<table>`元素设置合适的`border-radius`值。同时,确保`border-collapse`属性设为`separate`,以使边框在单元格之间分离,从而显示圆角效果...

    css table width表格宽度样式设置定义.docx

    例如,如果我们需要定义整个网页的所有 table 标签的宽度,那么使用 CSS 的通用选择器可能是一个好的选择。但是,如果我们需要定义一个特殊的 table 标签的宽度,那么使用 CSS 的类选择器或 HTML 的 width 属性可能...

    一个很好的CSS模块

    在这个名为"一个很好的CSS模块"的压缩包中,我们主要关注的是如何使用CSS来创建一个精美、简约的表格,适合应用于公司内部网站。 表格在网站中扮演着重要的角色,它们常用于展示数据、统计数据或者进行比较。传统的...

    CSS样式Table[1] - css3-table-price-hosting1

    在"css3-table-price-hosting1"这个示例中,很可能展示的是如何使用CSS3来美化一个价格或服务托管相关的表格,可能涉及到各种颜色、字体、边框和背景设计,以提升用户对价格计划的可读性和吸引力。通过查看提供的...

    表格自动换行主义CSS属性

    根据部分内容,我们可以整理出一个具体的示例代码: ```html <table style="table-layout:fixed; word-break:break-all; word-wrap:break-word"> 这是一段很长的文字,它会被自动换行,即使其中包含英文单词...

    鼠标拖动调整table列宽实例

    在HTML文件`resizable.htm`中,我们需要一个包含数据的`<table>`元素,并为其应用特定的CSS类或ID,以便JavaScript可以识别并应用拖动调整列宽的功能。CSS可能用于设置边框、光标等视觉效果,使用户能清楚地看到可...

    CSS3 Columns:比table更好用的分列式布局方法

    CSS里一直有一个让我们头疼的问题,就是创建布局很麻烦。当然,有很多方式,有很多技术都可以创建各种布局,但我们总觉得CSS里应该提供一些新属性,让我们能更好的管理布局。幸运的是,CSS3里提供了一批新的创建列式...

    GridView固定表头(不用javascript只用CSS!,很好用

    `和具体高度宽度的`div`中,这创建了一个可滚动的容器,而表头则通过CSS固定在顶部。 ```html <div style="overflow-y: scroll; height: 200px; width: 300px;" id="dvBody"> <!-- GridView代码 --> ``` #### 四...

    很实用的css样式代码案例。

    - **`filter`**:这是一个IE浏览器特有的CSS属性,用于实现滤镜效果,如透明度调整等。 - **`alpha(opacity=50)`**:该属性设置元素的透明度,值范围0到100,其中50表示50%的透明度。 #### 三、背景图像设置 ```...

    HTML+CSS+ajax+php+mysql实现登录

    这个项目提供了从头到尾构建一个功能完整登录系统的实例,涵盖了Web开发中前端、后端和数据库的综合应用,对于想要提升Web开发技能的新手来说,是一个很好的实践机会。通过学习这个项目,你可以掌握HTML和CSS的基本...

    Ext table布局实例 formpanel的table布局

    本文将深入探讨“Ext table布局实例”以及“formpanel的table布局”,帮助开发者更好地理解和运用这两种布局方式。 首先,我们要理解什么是Ext table布局。Ext table布局主要用于显示数据,它基于HTML的`<table>`...

    用HTML+CSS制作微博的静态页面.zip

    在本项目中,"用HTML+CSS制作微博的静态...总结来说,这个项目展示了如何使用HTML和CSS来构建一个类似微博的静态页面,涵盖了网页的基本结构、响应式设计、样式定制等多个方面,对于初学者来说是一个很好的实践案例。

    CSS 固定表头和列

    对于更复杂的需求,可以使用JavaScript库,如jQuery DataTables或Bootstrap的Table插件,它们提供了更强大的功能,如排序、过滤和分页,同时也能很好地处理固定表头和列的问题。 此外,对于响应式设计,还需要考虑...

    table th画2条头部交叉的线来区分不同区域的内容标题

    文件"line.html"很可能是实现这个效果的一个示例代码,通过查看这个文件,你可以更直观地理解上述步骤的实现。在实践中,不断试验和调试将帮助你找到最适合你的需求的解决方案。 总结来说,要在table th中画出交叉...

    css关键字很好的软件助手

    根据提供的标题、描述以及部分CSS属性内容,我们可以总结出一系列重要的CSS知识点,这些知识点对于学习和掌握CSS至关重要。下面将详细介绍这些属性的功能及其用法。 ### CSS页面布局控制 1. **page-break-after**:...

    CSS2中文手册

    CSS2是CSS的第二版,它在CSS1的基础上做了很多扩展和改进,使得网页设计更为灵活且功能更强大。 **一、选择器与声明** 1. **基础选择器**:包括类型选择器(如`div`)、ID选择器(如`#myID`)、类选择器(如`....

    非常美观的响应式css3表格样式代码

    这个资源对于学习和应用响应式设计以及CSS3特效来说,是一个很好的实例研究。 总之,这个“非常美观的响应式css3表格样式代码”展示了如何利用CSS3的先进特性来提升网页表格的视觉效果和交互性。无论是对初学者还是...

    td 内容自动换行 table表格td设置宽度后文字太多自动换行

    当设置为`fixed`时,表格的宽度由表格的第一个行的列宽决定,这样可以确保表格宽度不会因为内容的多少而产生变化,有利于保持页面布局的一致性。 其次,要让单元格内容在超出宽度时自动换行,需要使用`word-wrap: ...

    JavaScript Table行定位效果

    最后我用的方法是新建一个table,并把源tr克隆到新table中,然后通过对新table定位来实现效果。 用这个方法关键有两点,首先要做一个仿真度尽可能高的tr,还有是要准确的定位,这些请看后面的程序说明。 程序说明 ...

Global site tag (gtag.js) - Google Analytics