<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312">
<head>
<title>报表标题</title>
<meta http-equiv="Content-Type" content="text/html;charset=GBK" />
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<style type="text/css">
/* CSS Document */
body {
font: normal 11px auto "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #4f6b72;
}
a {
overflow:visible;
font-family:Tahoma,Helvetica,Arial,"宋体",sans-serif;
color:#0047D8;
}
a:hover{color: #9997D8;}
#mytable {
width: 700px;
padding: 0;
margin: 0;
}
caption {
padding: 0 0 5px 0;
width: 700px;
font: 18px Bold "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
text-align: center;
}
th {
font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #4f6b72;
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
border-top: 1px solid #C1DAD7;
letter-spacing: 2px;
text-transform: uppercase;
text-align: left;
padding: 6px 6px 6px 12px;
background: #CAE8EA url(images/bg_header.jpg) no-repeat;
}
th.nobg {
border-top: 0;
border-left: 0;
border-right: 1px solid #C1DAD7;
background: none;
}
td {
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
background: #fff;
font-size:11px;
padding: 6px 6px 6px 12px;
color: #4f6b72;
}
td.alt {
background: #F5FAFA;
color: #797268;
}
</style>
<body>
<div style="text-align:left">
<h4>统计数据概要</h4>
<h5><A HREF="#everyReportCountSummary">交易笔数</A></h5>
</div>
<div id="everyReportCountSummary" style="text-align:left">
<table border=0 width="50%" height="200">
<caption>交易笔数</caption>
<tr>
<th>交易状态</th><th>笔数</th>
</tr>
<tr>
<td class="alt">创建笔数</td><td class="alt">123</td>
</tr>
<tr>
<td>付款笔数</td><td>343</td>
</tr>
<tr>
<td class="alt">发货笔数</td><td class="alt">122</td>
</tr>
<tr>
<td>确认收货笔数</td><td>133</td>
</tr>
<tr>
<td class="alt">申请退款笔数</td><td class="alt">50</td>
</tr>
<tr>
<td>退款成功笔数</td><td>40</td>
</tr>
</table>
</div>
</body>
</html>
分享到：
相关推荐
一些非常漂亮实用的CSS表格样式,使用方便.页面简洁!
以下是一些关于CSS表格样式的知识点： 1. **基本样式设置**：首先，可以使用`border-collapse`属性来合并单元格边框，例如`border-collapse: collapse;`，以创建简洁的表格外观。`border-spacing`属性则可以控制...
以上就是CSS表格样式设计的基本方法。通过这些技巧，你可以创建出各种风格的表格，使其在视觉上更具吸引力，并提高用户体验。在实际项目中，还可以结合JavaScript或jQuery来实现更多交互效果，如排序、过滤和分页等...
在实际项目中，可以结合`myhome`这个压缩包中的源码来进一步学习和实践这些CSS表格样式的应用。通过不断试验和调整，你可以创造出独特且符合项目需求的表格样式。记得保持代码的简洁和可读性，这将对后期维护...
1. **基础表格样式**：CSS中的`table`, `th`, `td`, `tr`等选择器是控制表格样式的基石。例如，`table`选择器用于设置整个表格的基本样式，`th`和`td`分别用于定义表头和数据单元格的样式，而`tr`则用于处理行的样式...
虽然Slick Grid使用了JavaScript，但它在CSS方面也有出色表现，提供了高度定制的表格样式，包括行选择、分页、滚动和列排序等功能，适用于大数据集的显示。 每款CSS表格都有其独特之处，开发者可以根据项目需求和...
本资源“8款好看的css表格.rar”提供了一系列由国外设计师编写的精美CSS表格示例，这些表格在视觉呈现上极具吸引力，能够为网页增加专业且现代的外观。 CSS表格的设计主要围绕以下几个方面展开： 1. **布局与结构*...
1. **边框与间距**：使用`border`属性可以设置表格的边框宽度、样式和颜色。`border-collapse`属性用于决定是否合并表格单元格的边框，`cellspacing`和`cellpadding`属性则用来设置单元格之间的空隙和内部内容与边框...
在网页设计中，CSS3（层叠样式表第三版）为创建美观且功能丰富的表格样式提供了许多新特性。本文将详细探讨如何利用CSS3来设计适用于产品价格页面的表格样式，帮助你提升用户体验并增强页面视觉吸引力。 1. **边框...
标题中的“表格样式 CSS JS”指的是使用CSS（层叠样式表）和JavaScript来美化和增强HTML表格的方法。在网页设计中，HTML表格用于组织数据，而CSS和JS则可以用来改变表格的外观、交互性和功能。 **1. CSS在表格样式...
以上只是一些基本的CSS表格样式效果，实际上，通过CSS3的新特性，如渐变、阴影、过渡和动画，可以创造出更多复杂的视觉效果。在实际项目中，根据设计需求和用户体验，灵活运用这些技术可以大大提升表格的美观性和...
功能：用来统一网站的表格样式，可设置表格样式：表头、交替行、鼠标悬浮行、鼠标点击行、如果熟悉js还可继续添加样式比如表格标题caption的样式。 //调用方法：就3步，网站所有页面表格的样式就统一了 //1 引入样式...
- **CSSTableGallery**：收集了大量表格样式，提供设计灵感。 - **jQuery Table Filter**：实现数据的灵活排序和过滤。 - **Sortable/Resizable/Editable Table Kit**：基于Prototype框架，支持表格的实时调整大小、...
十个多种样式表格边框，代码完全呈现，而且颜色不一样可以根据自己的网站布局设计改变。
本教程将深入探讨如何使用纯 CSS 实现美观且功能丰富的表格样式。 表格在 HTML 中通常使用 `<table>`、`<tr>`（行）、`<th>`（表头）和 `<td>`（单元格）等标签来创建。CSS 则通过选择器和属性来控制表格的样式。...
本文将深入探讨Java中的日志处理，同时结合CSS表格样式，讲解如何美化日志输出。 首先，Java中常见的日志框架有Log4j、SLF4J（Simple Logging Facade for Java）和Java Util Logging (JUL)。这些框架提供了一种结构...
本资源提供了一种“非常美观的响应式css3表格样式代码”，它能够显著提升网页中数据展示的视觉吸引力和用户体验。让我们深入探讨一下这个主题。 CSS3是层叠样式表（Cascading Style Sheets）的第三个版本，它引入了...
通过分析提供的文件信息，我们可以提炼出以下几个与CSS样式定义的圆角表格相关的知识点： ### CSS样式定义圆角表格的关键技术点 #### 1. **HTML结构** - 在本示例中，圆角表格主要是通过一个`<div>`元素来实现的...
还可以使用CSS实现更复杂的表格样式，如条纹背景、悬停效果、排序箭头等。例如，给偶数行添加不同的背景色： ```css tr:nth-child(even) { background-color: #f2f2f2; } tr:hover { background-color: #ddd; } ...