一个不错的简单的表格样式,由于比较菜,有些是从网上“隔壁老王”那里抄来的,比较喜欢这个人的一些文章。
<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)。
分享到:
相关推荐
1. **基础表格样式**:CSS中的`table`, `th`, `td`, `tr`等选择器是控制表格样式的基石。例如,`table`选择器用于设置整个表格的基本样式,`th`和`td`分别用于定义表头和数据单元格的样式,而`tr`则用于处理行的样式...
"jiaoben4920"可能是一个示例脚本或CSS样式文件,配合HTML表格一同展示效果。 总的来说,这个压缩包提供了实现动态表格排序的jQuery代码示例,对于学习和提升网页开发中的交互体验非常有价值。通过理解和实践这些...
同时,配合JavaScript库如jQuery DataTables,可以实现表格数据的排序、过滤和搜索。 5. **颜色编码**:根据数据值应用不同颜色,比如用渐变色表示数值范围,使表格更易理解。 6. **自定义样式**:可以使用CSS动画...
6. **排序功能**:虽然这不是CSS直接实现的,但可以使用CSS配合JavaScript库(如jQuery DataTables)为表格添加排序功能,使得用户可以轻松地按列排序数据。 7. **响应式设计**:对于移动设备,可以使用媒体查询(`@...
通过CSS定义表格样式,接着使用JavaScript和jQuery插件来增强表格功能。在开发过程中,`docs`和`tests`可以帮助理解插件的用法和功能,`build.xml`和`.settings`则辅助自动化构建和配置。 总结来说,“js css精美...
`jquery-ui-1.11.4.custom` 可能包含 `.css` 文件,如 `jquery-ui.css` 或 `ui.theme.css`,它们定义了按钮、对话框、滑块等元素的样式。 2. **JavaScript 文件**:jQuery UI 的核心功能由 JavaScript 实现。主要的...
《CSS3响应式多功能表格样式特效详解》 在现代网页设计中,响应式布局已经成为不可或缺的一部分,它使得网站能够在各种不同尺寸的设备上呈现出最佳的视觉效果。CSS3作为最新的CSS版本,为实现这一目标提供了强大的...
此外,JQuery丰富的插件生态系统,如LigerUI,进一步丰富了前端功能,提供了诸如表格、下拉菜单、对话框等组件,加速了开发进度。 JavaScript是网页开发中的脚本语言,它与HTML和CSS紧密配合,实现页面的动态交互。...
接下来,我们将使用CSS来设置表格样式和滚动条效果。CSS可以用来定制滚动条的外观,例如颜色、宽度和箭头样式等。以下是一些基本的CSS代码: ```css #scrollableTable { width: 100%; overflow-y: auto; border-...
jqGrid是一款基于jQuery的开源数据网格插件,用于在网页上展示和操作表格数据,它提供了丰富的功能,如数据分页、排序、过滤、编辑、添加、删除等,且具有高度自定义性。这个"jqGrid(jqueryGrid表格操作demo)"是一...
标题“表格样式模板”暗示我们将探讨一个利用jQuery实现的,包含表格样式的项目。这个项目可能包含了预定义的样式和结构,方便开发者快速构建具有表格功能的网页。 描述中提到“有表格等样式,现成代码参考”,这...
9. **表格分页**:对于大型数据集,可以使用CSS配合JavaScript库(如Bootstrap的Pagination组件)实现表格分页功能,提高加载速度和用户体验。 10. **无障碍性**:确保表格具有正确的`scope`属性(如`...
本项目“tableRow 表格与复选框配合jquery插件.zip”显然是一个基于jQuery的解决方案,旨在优化这种交互体验。下面将详细解释相关知识点。 1. jQuery库:jQuery是一个快速、简洁的JavaScript库,简化了HTML文档遍历...
4. **CSS美化**:Tablecloth提供了丰富的CSS样式,使得表格的视觉效果大幅提升,可以轻松定制符合网站风格的表格样式。 5. **响应式设计**:Tablecloth支持响应式布局,确保在不同设备和屏幕尺寸下都能保持良好的...
我们可以通过`.html()`方法来改变元素的内容,`.append()`或`.prepend()`来向元素内部添加内容,`.attr()`和`.removeAttr()`用来设置或移除属性,而`.css()`则可以调整样式。 在动态表格实现中,我们通常会遇到以下...
1. **外观美化**:jQuery表格通常可以通过CSS样式进行高度定制,以适应各种设计需求。它可以拥有精美的边框、渐变背景、自定义字体等,使得数据展示更加专业和吸引人。 2. **数据源支持**:jQuery表格可以与各种...
3. **样式控制**:jQuery可以配合CSS选择器修改表格样式,如`$(".highlight").css("background-color", "yellow")`。 4. **数据绑定**:通过AJAX获取数据并填充表格,例如`$.ajax().done(function(data) { $("#...
2. **CSS 样式**:使用CSS来设置表格样式,以及定义展开/折叠按钮的样式。通常会有一个特殊的类名(如`.toggle`)用于控制节点的展开和折叠状态。 3. **JavaScript逻辑**:核心部分在于JavaScript代码,这部分用于...
3. **javascript**:JavaScript是网页的动态编程语言,与HTML和CSS配合,赋予页面交互性。在后台管理界面中,JavaScript用于实现动态加载、表单验证、数据处理等功能。 4. **css**:CSS用于控制网页的样式和布局,...
CSS有三种使用方式:内联样式、内部样式表和外部样式表。盒模型、浮动布局、定位、Flexbox和Grid是CSS布局中的关键概念,而CSS3引入了更多的选择器、过渡、动画和3D效果,增强了网页的视觉表现力。 【HTML】 HTML...