用CSS实现柱状图（Bar Graph）的方法（四）—table实现复杂柱状图（2）
作者：dudo 来源：dudo博客 发布时间：2008-05-28 12:55:00
标签：柱状图,Bar,Graph,table,表格,css
二、定义总体样式
首先还是设定等宽字体、字号、默认空白等
* {margin:0; padding:0;}
body {padding:0;margin:40px;font-size:9pt;font-family:Helvetica,Geneva,sans-serif;}
这段代码的意思很简单，不用过多解释。
和前面几节一样，我们应用的重点还是相对定位和绝对定位的知识。首先我们设定整体table的样式：
table#q-graph {
width:600px;
height:300px;
caption-side:top;
border:2px solid #0063be;
background:#adfe12 url(fade-light.png) repeat-x scroll 0 0;
position:relative;
border-collapse:collapse;
display:block; /*for Firefox*/
}
这段代码很简单，没有特殊要说明的地方，只不过在Firefox对Table进行相对定位后需要设置display:block,Internet Explore下不存在这样的问题。同时border-collapse:collapse;设置相邻单元格共用一个边框。
此外，对于table的默认样式，Firefox和Internet Explorer的解释是不同的，包括他们的位置和宽度都，因此要统一设置：
table#q-graph caption {
width:100％;
position:absolute;
top:-20px;
}
注意：在Internet Explore中，这实际上无法改变caption的位置（只接受正的top值），我们只是让Firefox中的caption和IE中效果相同。
查看演示页面：Bar-Graph-1.htm
0
投稿猜你喜欢
- 临近下班的时候，突然想到统计热门文章的问题。以前我所知道的热门文章统计，基本有这么几种：按点击数排序 该方法最大的问题在于热门的文章会越来越
- 假如页面上有很多条记录，很多情况下，对这些信息按照字母表降序排序会比传统的升序排序显示效率更高。采用你熟悉的ORDER BY 子句，你可以很
这些导航菜单来自于Dribbble网站，出自于世界各地的优秀设计师之手，涵盖了各种不同的风格，个个都非常精美。这里我将这些导航菜单展示出来，- 用phpMyAdmin时在导入和导出MySQL5数据时，有一个SQL compatibility mode选项，其可选值为NONE、ANSI
- 经常看见有人问，MSSQL占用了太多的内存，而且还不断的增长；或者说已经设置了使用内存，可是它没有用到那么多，这是怎么一回事儿呢？ 首先，我
- 本文由 kouyubo 整理到现在为止，只有一些已经工作的特性，他们中的一些如下:圆角从web2.0开始，开始流行使用圆角，如果你不使用圆角
- 内容摘要：本文介绍了asp使用正则表达式自动解析远程图片地址并下载保存的方法，值得收藏！一、使用正则表达式Regexp匹配取得原页中的图片的
- html5带给我们的不仅仅是更多语义丰富的标签，还有更多更牛逼的特性，比如“离线存储”。 对于台式电脑来说，或者它并没有带来什么惊喜，但是对
- alt的准确含义是，当照片不存在或者load错误时的提示。但同时img也同时支持alt和title，再有某些浏览器的错误解析，因此经常被误导
- 影响的范围: IE的所有版本在表单的radio/checkbox控件中，一旦他们的DOM结构被更改过就会出现这个bug。bug描述当象下例中
- 在网站的一些应用中需要提供用户直接打印页面的功能，最明显的就是电子优惠券，商家根据网站提供的模板输入内容，然后生成优惠券页面，用户打印这个页
- 假如读者已经熟悉了ASP 2.0，并正在寻找3.0版本中的实际改变的列表，那么将在下面发现这些信息。假如读者是一个ASP的初学者，可以越过本
- 1.函数array()功能:创建一个数组变量格式:array(list)参数:list为数组变量中的每个数值列,中间用逗号间隔例子:<
- 最好也是最简单的办法就是利用Cookie，而不必用到数据库。当然，你愿意用数据库也可以。下面就是利用Cookie来实现的：<
- asp如何显示全部的环境变量？<％@Language="VBScript"％><％dim H
- slice 可以用来获取数组片段，它返回新数组，不会修改原数组。除了正常用法，slice 经常用来将 array-like 对象转换为 tr
- 代码'########### '检测远程文件是否存在 '########### function CheckURL(
- 如何最准确地统计在线用户数？我们推荐的这个程序据说是目前最好的在线用户数量统计程序。代码如下：'首先要设置好global.asa&n
- 本文只讨论Oracle中最常见的索引，即是B-tree索引。本文中涉及的数据库版本是Oracle8i。 一. 查看系统表中的用户索引 在Or
- 如何发送一个XMLHttpRequest的检索的特定部分HTML标题数据。<html> <head> <tit
