20 个经典的 Ajax + CSS 表格
并不是所有的Web 开发者都会对美化表格数据感兴趣，今天我们收集了20 个功能强大，外观漂亮的基于Ajax + CSS 的表格效果，你可以从这些示例中学习怎么使用这些表格提供的排序和过滤的功能来组织表格中的数据。
现在让我们来看看这些表格：（点击每个样式前面的链接即可进入下载）
#1. Tablecloth
Tablecloth 由CSS Globe 开发，是一个轻量级的、易于使用的表格，以友好的方式将样式和行为添加到你当前的HTML 表格元素当中。
#2. Ask the CSS Guy Table
Ask the CSS Guy Table 演示了怎么样创建一个可以显示数据之间的关系的表格，例如在单击某个单元格时可以同时突出显示最顶端的行和最左边的列。
#3. A CSS styled table version 2
Veerle Duoh 为我们介绍了一种如何利用CSS 使表格更有吸引力的方法，并且在实现的过程中充分考虑了表格的可访问性。
#4. Sortable Table
Sortable Table ——演示了如何按升序或降序排列以及如何过滤显示表格中的数据。
#5. Row Locking with CSS and JavaScript
演示了如何利用Javascript 和 CSS 实现“锁定行”的效果，选中的行会一� ......
20 个经典的 Ajax + CSS 表格
并不是所有的Web 开发者都会对美化表格数据感兴趣，今天我们收集了20 个功能强大，外观漂亮的基于Ajax + CSS 的表格效果，你可以从这些示例中学习怎么使用这些表格提供的排序和过滤的功能来组织表格中的数据。
现在让我们来看看这些表格：（点击每个样式前面的链接即可进入下载）
#1. Tablecloth
Tablecloth 由CSS Globe 开发，是一个轻量级的、易于使用的表格，以友好的方式将样式和行为添加到你当前的HTML 表格元素当中。
#2. Ask the CSS Guy Table
Ask the CSS Guy Table 演示了怎么样创建一个可以显示数据之间的关系的表格，例如在单击某个单元格时可以同时突出显示最顶端的行和最左边的列。
#3. A CSS styled table version 2
Veerle Duoh 为我们介绍了一种如何利用CSS 使表格更有吸引力的方法，并且在实现的过程中充分考虑了表格的可访问性。
#4. Sortable Table
Sortable Table ——演示了如何按升序或降序排列以及如何过滤显示表格中的数据。
#5. Row Locking with CSS and JavaScript
演示了如何利用Javascript 和 CSS 实现“锁定行”的效果，选中的行会一� ......
js要求：为使系统能在IE和FF下正常运行，不要使用原生态的javascript，建议使用js的库（如：jquery）
并且要求用jquery中，获取对象的属性使用$obj.attr("attrName"),不要使用obj.attrName,防止自定义的属性在FF中不能正常运行
1、问题：<span></span>在FF下运行不正常
解决方法：用<div></div>替换
2、现有问题：document.frames[i].document不能在FF下正常运行
解决方法：window.frames[i].document(IE,FF都可正常运行)
注意：这并不是说document对象在FF中不能使用，只是针对frames对象不能用document
3、改错：document.body.clientWidth，document.body.clientHeight在IE和FF下都能正常运行
4、判断IE浏览器和FF的JS
(1)if(navigator.appName.indexOf("Explorer")>-1){}//IE,Opera
else{}//FF
(2)if (document.all) {}//IE
else{}//FF
5、问题：node.firstChild在FF下不能正常运行
解决方法：用getElmentById("id")替换
6、问题：scroll='no'在FF中玩法 ......
js要求：为使系统能在IE和FF下正常运行，不要使用原生态的javascript，建议使用js的库（如：jquery）
并且要求用jquery中，获取对象的属性使用$obj.attr("attrName"),不要使用obj.attrName,防止自定义的属性在FF中不能正常运行
1、问题：<span></span>在FF下运行不正常
解决方法：用<div></div>替换
2、现有问题：document.frames[i].document不能在FF下正常运行
解决方法：window.frames[i].document(IE,FF都可正常运行)
注意：这并不是说document对象在FF中不能使用，只是针对frames对象不能用document
3、改错：document.body.clientWidth，document.body.clientHeight在IE和FF下都能正常运行
4、判断IE浏览器和FF的JS
(1)if(navigator.appName.indexOf("Explorer")>-1){}//IE,Opera
else{}//FF
(2)if (document.all) {}//IE
else{}//FF
5、问题：node.firstChild在FF下不能正常运行
解决方法：用getElmentById("id")替换
6、问题：scroll='no'在FF中玩法 ......
1. 定义样式
1.1 按html标签定义
例如：body{background-color:#999999; text-align:center}
1.2 按类定义
例如：.style1{border-style:solid; border-color:#0000FF; border-width:1px}
1.3 按id定义
例如：#style2{border-style:solid; border-color:#FF0000; border-width:1px}
2. CSS的位置和引用
可以把样式定义在css文件中，然后，在html文件中引用；也可以把样式定义直接放在style标签中。
(1)直接把样式定义放在<style></style>中。
<style>body{background-color:#999999; text-align:center}</style>
(2)在html文件引用css文件
<link href="style.css" type="text/css" rel="stylesheet"/>
3. 使用CSS样式定义
根据三种定义方法，有三种使用方法
(1)使用html标签定义时，不需要对html代码做任何修改，相应标签会自动呈现样式表定义效果
(2)使用类定义时，html标签增加class属性，属性值设定为需要的样式
<div class="style1">我是一个div, 用class引用样式& ......
姓名：乐乐---乐css-lecss
团队开发做的。本人负责的页面以及排版之类的，有兴趣的可以去网站上转悠转悠下。。
天堂网：
www.tiantang.cn
http://tiantang.cn/hills/hill1/page/hillindex.aspx
老人网：
www.laoren.cn
--
设计过程那是一种漫长而昂贵的折磨..。
--
我蛮喜欢CSS的，可是却也对它很烦恼，有个时候太会折腾人了，弄来弄去有时候就是写错了一个字母要不然就是少了个分号，哎。
从事网页设计这一行业准确的来说应该已有三年多了吧。。。。
。、。 ......
1、CSS的语法是这样的：selector {property: value}
selector-选择器（比如body、div、h2……）
property-属性 （比如background-color、hidden、text-align……）
value-值（比如yellow、blue、12px、center……）
[注]：
a、除id外大小写不敏感
b、value存在多个单词时，要用引号（比如：font-family: "Book Antiqua";）
c、设置完一项后，以；结尾
2、下面是一个CSS文件的示例：
@CHARSET "UTF-8";
/*可以为多个html元素或标签定义样式*/
h1,h2 {
color: aqua;
}
/*为单个元素或标签定义样式*/
h3 {
font-style: italic;
}
h4 {
color: silver;
}
table {
color: blue;
}
/*为table中的label定义样式*/
table label {
color: purple;
}
/*为id为redDiv的元素或标签定义样式*/
#redDiv {
color: red;
}
/*为id为redDiv的元素或标签中的h3标签定义样式*/
#redDiv h3 {
color: green;
}
/*为class为bg的元素或标签定义样式*/
.bg {
background-color: yellow;
}
/*为class为bg的元素或标签中的p标签定义样式*/
.bg p {
background-color: silver;
}
我们看到，可以通过
a、 XX{* ......
Css代码
1.line-height:24px;
line-height:24px;
使用固定宽度的容器并且需要一行垂直居中时，使用 line-height 即可（高度与父层容器一致），更多的垂直居中总结可以看这里。
清除容器浮动
Css代码
1.#main {
2. overflow:hidden;
3.}
#main {
overflow:hidden;
}
期前也提到过这样的问题，更多信息可以看这里。
不让链接折行
Css代码
1.a {
2. white-space:nowrap;
3.}
a {
white-space:nowrap;
}
上面的设定就能避免链接折行，不过个人建议长链接会有相应的这行（有关换行方面的讨论，参看圆心的记录）。
始终让 Firefox 显示滚动条
Css代码
1.html {
2. overflow:-moz-scrollbars-vertical;
3.}
html {
overflow:-moz-scrollbars-vertical;
}
更多的 Mozilla/Firefox 私有 CSS 属性可以参考这里。需跨浏览器的支持，也可以使用
Css代码
1.body, html { &n ......
最新文章 : css