table css 柱状与选项卡

最新推荐文章于 2024-07-22 14:19:33 发布

letisgoto

最新推荐文章于 2024-07-22 14:19:33 发布

阅读量588

点赞数

文章标签： table css class border xhtml html

本文链接：https://blog.csdn.net/zhoubohua/article/details/3127324

版权

<!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">
<head>
<title> 基于table的柱状图实现——dudo博客 </title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
* {margin:0; padding:0;}
   body {padding:0;margin:40px;font-size:9pt;font-family:Helvetica,Geneva,sans-serif;}
table#q-graph {
width:600px;
height:300px;
caption-side:top;
border:2px solid #0063be;
background:transparent;
position:relative;
display:block; z-index:2;
}
table#q-graph caption {
width:100%;
position:absolute;
top:-20px;
}
table#q-graph tbody tr,table#q-graph tbody th {
position:absolute;
width:150px;
height:296px;
vertical-align: top;
bottom:0;
border-right:1px dotted #41a3e2;
}
tr#q1 {left:0;}
tr#q2 {left:149px;}
tr#q3 {left:298px;}
tr#q4 {left:447px;border-right:none;}
td.bar{
position:absolute;
text-align:center;
width:34px;
bottom:0;
.bottom:2px;
z-index:2;
}
th.north,td.north {
left:36px;
background:#ddd url(http://www.dudo.org/attachments/month_0804/c2008428195153.gif) no-repeat 0 0;
}
th.south,td.south {
left:80px;
background:#ddd url(http://www.dudo.org/attachments/month_0804/c2008428195153.gif) no-repeat -34px 0;
}
table#q-graph thead tr {
bottom:auto;
left:100%;
margin:-2.5em 0pt 0pt 5em;
top:50%;
position:absolute;
}
table#q-graph thead th {
width:34px;
position:absolute;
left:0;
height:auto;
color:#fff;
}
table#q-graph thead th.north {top:30px;}
ul#ticks {
list-style-type:none;
width:600px;
position:relative;
top:-300px;#top:-302px;z-index:1;
                  background:#adfe12;
                   }
ul#ticks li {
border-top:1px dotted #41a3e2;
height:59px;
}
ul#ticks li:first-child {
border:none;
}
.fix_IE{border:none!important;#height:45px!important;}
ul#ticks li p {
position:absolute;
left:100%;
}
</style>
</head>
<body>
<table id="q-graph" cellspacing="0">
<caption>某公司2007年1~4季度南北区域销售情况对照表（单位：万件）</caption>
<thead>
<tr>
   <th></th>
   <th class="north">北方</th>
   <th class="south">南方</th>
</tr>
</thead>
<tbody>
<tr id="q1">
   <th scope="row">Q1</th>
   <td class="north bar" style="height:111px">18</td>
   <td class="south bar" style="height:99px">16</td>
</tr>
<tr id="q2">
   <th scope="row">Q2</th>
   <td class="north bar" style="height:198px">32</td>
   <td class="south bar" style="height:210px">34</td>
</tr>
<tr id="q3">
   <th scope="row">Q3</th>
   <td class="north bar" style="height:260px">43</td>
   <td class="south bar" style="height:198px">32</td>
</tr>
<tr id="q4">
   <th scope="row">Q4</th>
   <td class="north bar" style="height:111px">18</td>
   <td class="south bar" style="height:198px">32</td>
</tr>
</tbody>
</table>
<ul id="ticks">
<li class="fix_IE"><p>50</p></li>
<li><p>40</p></li>
<li><p>30</p></li>
<li><p>20</p></li>
<li><p>10</p></li>
</ul>
</body>
</html>

========================选项卡==================================================================

<html>
<title></title>
<head>
<style type=text/css>
td {
font-size: 12px;
color: #000000;
line-height: 150%;
}
.sec1 {
background-color: #EEEEEE;
cursor: hand;
color: #000000;
border-left: 1px solid #FFFFFF;
border-top: 1px solid #FFFFFF;
border-right: 1px solid gray;
border-bottom: 1px solid #FFFFFF
}
.sec2 {
background-color: #D4D0C8;
cursor: hand;
color: #000000;
border-left: 1px solid #FFFFFF;
border-top: 1px solid #FFFFFF;
border-right: 1px solid gray;
font-weight: bold;
}
.main_tab {
background-color: #D4D0C8;
color: #000000;
border-left:1px solid #FFFFFF;
border-right: 1px solid gray;
border-bottom: 1px solid gray;
}
</style>
   <script language=javascript>
function secBoard(n)
{
for(i=0;i<secTable.cells.length;i++)
secTable.cells[i].className="sec1";
secTable.cells[n].className="sec2";
for(i=0;i<mainTable.tBodies.length;i++)
mainTable.tBodies[i].style.display="none";
mainTable.tBodies[n].style.display="block";
}
</script>
</head>
<body>
   <table border=0 cellspacing=0 cellpadding=0 width=549 id=secTable>
    <tr height=20 align=center>
     <td class=sec2 width=10% οnclick="secBoard(0)">关于TBODY标记</td>
     <td class=sec1 width=10% οnclick="secBoard(1)">关于cells集合</td>
     <td class=sec1 width=10% οnclick="secBoard(2)">关于tBodies集合</td>
     <td class=sec1 width=10% οnclick="secBoard(3)">关于display属性</td>
    </tr>
   </table>
   <table border=0 cellspacing=0 cellpadding=0 width=549 height=240 id=mainTable class=main_tab>
    <tbody style="display:block;">
    <tr>
     <td align=center valign=top> <br>
      <br>
      这里填加内容，略去。1 </td>
    </tr>
    </tbody> <tbody style="display:none;">
    <tr>
     <td align=center valign=top> <br>
      <br>
      这里填加内容，略去。2 </td>
    </tr>
    </tbody> <tbody style="display:none;">
    <tr>
     <td align=center valign=top> <br>
      <br>
      这里填加内容，略去。3 </td>
    </tr>
    </tbody> <tbody style="display:none;">
    <tr>
     <td align=center valign=top> <br>
      <br>
      这里填加内容，略去。4 </td>
    </tr>
    </tbody>
   </table>
</body>
</html>

letisgoto

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
table css 柱状与选项卡

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml"> 基于table的柱状图实现——dudo博客 * {margin:0; padding:0;} body {padding:0;margin:40px;font-size:9pt;font-family:H
复制链接

扫一扫