`
TiFa.L.Hart
  • 浏览: 16718 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

css配合jquery设置表格样式

css 
阅读更多
一个不错的简单的表格样式,由于比较菜,有些是从网上“隔壁老王”那里抄来的,比较喜欢这个人的一些文章。

<style type="text/css">	
table{
	width:640px;
	height:auto;
	border-style:solid;
	border-bottom-width:thin;
	margin:0 auto;
       table-layout:fixed;
       empty-cells:show; 
       border-collapse: collapse;
       margin:0 auto;
       font-size:14px;
       border:1px solid #cad9ea;
       color:#666;
}
/*第一行,标题样式,图片根据实际情况替换*/
.fi_tr{
	background:url(img/table_header.png);
	text-align:center;
	height:30px;
}
td{
	overflow:hidden;
	 height:25px;
	 border:1px solid #cad9ea;
   	 padding:0 1em 0;
}
/*设置鼠标在当前行的样式*/
tr:hover{
	background-color:#BFEDF9;
}
/*设置双数行的样式*/
.odd{
 background-color:#f5fafe;
}
</style>
<script type="text/javascript">
	$(document).ready(function(){	
	   //设置双数行的样式
	    $("tr:even").addClass("odd");	
	});//jquery结束
</script>


代码就这么多,html表格就免打了,因为表格标签不需要声明任何id或class了(除了第一行,即标题的设置class为fi_tr)。
分享到:
评论

相关推荐

    精美的css控制表格样式

    1. **基础表格样式**:CSS中的`table`, `th`, `td`, `tr`等选择器是控制表格样式的基石。例如,`table`选择器用于设置整个表格的基本样式,`th`和`td`分别用于定义表头和数据单元格的样式,而`tr`则用于处理行的样式...

    jQuery Table表格排序显示代码.zip

    "jiaoben4920"可能是一个示例脚本或CSS样式文件,配合HTML表格一同展示效果。 总的来说,这个压缩包提供了实现动态表格排序的jQuery代码示例,对于学习和提升网页开发中的交互体验非常有价值。通过理解和实践这些...

    css样式表格

    同时,配合JavaScript库如jQuery DataTables,可以实现表格数据的排序、过滤和搜索。 5. **颜色编码**:根据数据值应用不同颜色,比如用渐变色表示数值范围,使表格更易理解。 6. **自定义样式**:可以使用CSS动画...

    表格的几种css样式效果

    6. **排序功能**:虽然这不是CSS直接实现的,但可以使用CSS配合JavaScript库(如jQuery DataTables)为表格添加排序功能,使得用户可以轻松地按列排序数据。 7. **响应式设计**:对于移动设备,可以使用媒体查询(`@...

    js css精美表格

    通过CSS定义表格样式,接着使用JavaScript和jQuery插件来增强表格功能。在开发过程中,`docs`和`tests`可以帮助理解插件的用法和功能,`build.xml`和`.settings`则辅助自动化构建和配置。 总结来说,“js css精美...

    jquery-ui js/css通用文件

    `jquery-ui-1.11.4.custom` 可能包含 `.css` 文件,如 `jquery-ui.css` 或 `ui.theme.css`,它们定义了按钮、对话框、滑块等元素的样式。 2. **JavaScript 文件**:jQuery UI 的核心功能由 JavaScript 实现。主要的...

    CSS3响应式多功能表格样式特效.rar

    《CSS3响应式多功能表格样式特效详解》 在现代网页设计中,响应式布局已经成为不可或缺的一部分,它使得网站能够在各种不同尺寸的设备上呈现出最佳的视觉效果。CSS3作为最新的CSS版本,为实现这一目标提供了强大的...

    HTML5+CSS3.0+JQUERY+JS+XHTML手册集合

    此外,JQuery丰富的插件生态系统,如LigerUI,进一步丰富了前端功能,提供了诸如表格、下拉菜单、对话框等组件,加速了开发进度。 JavaScript是网页开发中的脚本语言,它与HTML和CSS紧密配合,实现页面的动态交互。...

    jquery给表格加滚动条.zip

    接下来,我们将使用CSS来设置表格样式和滚动条效果。CSS可以用来定制滚动条的外观,例如颜色、宽度和箭头样式等。以下是一些基本的CSS代码: ```css #scrollableTable { width: 100%; overflow-y: auto; border-...

    jqGrid(jqueryGrid表格操作demo)

    jqGrid是一款基于jQuery的开源数据网格插件,用于在网页上展示和操作表格数据,它提供了丰富的功能,如数据分页、排序、过滤、编辑、添加、删除等,且具有高度自定义性。这个"jqGrid(jqueryGrid表格操作demo)"是一...

    表格样式模板

    标题“表格样式模板”暗示我们将探讨一个利用jQuery实现的,包含表格样式的项目。这个项目可能包含了预定义的样式和结构,方便开发者快速构建具有表格功能的网页。 描述中提到“有表格等样式,现成代码参考”,这...

    web开发表格CSS

    9. **表格分页**:对于大型数据集,可以使用CSS配合JavaScript库(如Bootstrap的Pagination组件)实现表格分页功能,提高加载速度和用户体验。 10. **无障碍性**:确保表格具有正确的`scope`属性(如`...

    tableRow 表格与复选框配合jquery插件.zip

    本项目“tableRow 表格与复选框配合jquery插件.zip”显然是一个基于jQuery的解决方案,旨在优化这种交互体验。下面将详细解释相关知识点。 1. jQuery库:jQuery是一个快速、简洁的JavaScript库,简化了HTML文档遍历...

    Tablecloth漂亮的Ajax+CSS表格

    4. **CSS美化**:Tablecloth提供了丰富的CSS样式,使得表格的视觉效果大幅提升,可以轻松定制符合网站风格的表格样式。 5. **响应式设计**:Tablecloth支持响应式布局,确保在不同设备和屏幕尺寸下都能保持良好的...

    自己动手实现JQUERY动态表格需要的拿去。 附件下载可以直接运行看效果!

    我们可以通过`.html()`方法来改变元素的内容,`.append()`或`.prepend()`来向元素内部添加内容,`.attr()`和`.removeAttr()`用来设置或移除属性,而`.css()`则可以调整样式。 在动态表格实现中,我们通常会遇到以下...

    jQuery表格

    1. **外观美化**:jQuery表格通常可以通过CSS样式进行高度定制,以适应各种设计需求。它可以拥有精美的边框、渐变背景、自定义字体等,使得数据展示更加专业和吸引人。 2. **数据源支持**:jQuery表格可以与各种...

    jquery表格

    3. **样式控制**:jQuery可以配合CSS选择器修改表格样式,如`$(".highlight").css("background-color", "yellow")`。 4. **数据绑定**:通过AJAX获取数据并填充表格,例如`$.ajax().done(function(data) { $("#...

    jquery 表格树,凑合用吧

    2. **CSS 样式**:使用CSS来设置表格样式,以及定义展开/折叠按钮的样式。通常会有一个特殊的类名(如`.toggle`)用于控制节点的展开和折叠状态。 3. **JavaScript逻辑**:核心部分在于JavaScript代码,这部分用于...

    一个基于JQuery的后台管理UI界面,技术栈Html、Css、JavaScript、JQuery

    3. **javascript**:JavaScript是网页的动态编程语言,与HTML和CSS配合,赋予页面交互性。在后台管理界面中,JavaScript用于实现动态加载、表单验证、数据处理等功能。 4. **css**:CSS用于控制网页的样式和布局,...

    PHP、jQuery、CSS、HTML等Web开发参考手册CHM文档

    CSS有三种使用方式:内联样式、内部样式表和外部样式表。盒模型、浮动布局、定位、Flexbox和Grid是CSS布局中的关键概念,而CSS3引入了更多的选择器、过渡、动画和3D效果,增强了网页的视觉表现力。 【HTML】 HTML...

Global site tag (gtag.js) - Google Analytics