[收藏]CSS,JS控制Table的行顏色,以及邊框

http://www.itxuexi.com/tech/wangyezhizuo/css/66021252633559.html

 

http://bbs.blueidea.com/thread-2853109-1-4.html

 

http://www.google.com.hk/search?hl=zh-CN&newwindow=1&safe=strict&rls=ig&q=JQUERY+%E8%A1%8C%E9%A2%9C%E8%89%B2&btnG=Google+%E6%90%9C%E7%B4%A2&aq=f&aqi=&aql=&oq=&gs_rfai=

 

border

http://www.google.com.hk/search?hl=zh-CN&newwindow=1&safe=strict&rls=ig&q=css+%E8%A1%A8%E6%A0%BC%E8%BE%B9%E6%A1%86&aq=2g&aqi=g-g3g1g-g2g2g-g1g1&aql=&oq=css%E8%A1%A8%E6%A0%BC&gs_rfai=

 

 

代码
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=big5" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>無標題文件</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
  jQuery(".list>tbody tr:odd").addClass("odd");
  jQuery(".list>tbody tr:even").addClass("even");
  jQuery(".list>tbody tr").hover(function(){
    jQuery(this).addClass("selectrow")
  },function(){
    jQuery(this).removeClass("selectrow")
  });
});
</script>

<style type="text/css">
.list
{
    width:100%;
    border:1px #CCC solid;
    border-collapse:collapse;
    empty-cells:show;
}
.list td, th
{
    padding:5px;
    border:1px #CCC solid;
}
.list th{ font-weight:normal; background-color:#900; color:#FFF;}
.list tfoot td{ text-align:center;}
/*tbody tr{background-color:expression((this.sectionRowIndex%2==0)?"#FFF":"#EBEBEB")}*/
.odd {background-color:#EBEBEB;}
.even{background-color:#FFF;}
.selectrow {background-color:#D4DFFF;}
</style>
</head>
<body>
<table class="list">
    <caption>標題</caption>
    <col width="50" align="center" />
    <col />
    <col />
    <col />
    <col />
    <col />
    <thead>
        <tr>
            <th>No</th>
            <th>列一</th>
            <th>列二</th>
            <th>列三</th>
            <th>列四</th>
            <th>列五</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>dd</td>
            <td>dd</td>
            <td>dd</td>
            <td>dd</td>
            <td>dd</td>
            <td></td>
        </tr>
        <tr>
            <td>dd</td>
            <td>dd</td>
            <td>dd</td>
            <td>dd</td>
            <td>dd</td>
            <td></td>
        </tr>
        <tr>
            <td>dd</td>
            <td>dd</td>
            <td>dd</td>
            <td>dd</td>
            <td>dd</td>
            <td></td>
        </tr>
        <tr>
            <td>dd</td>
            <td>dd</td>
            <td>dd</td>
            <td>dd</td>
            <td>dd</td>
            <td></td>
        </tr>
    </tbody>
    <tfoot>
        <tr><td colspan="6">Page</td></tr>
    </tfoot>
</table>
</body>
</html>

 

 

代码
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文件</title>
</head>

<body>
<style>
* { font-size:90%;}
font { color:#0000CC;}
</style>
<font>下面的细线表格是用cellspacing来实现的，用表格的背景色做为边框的颜色。</font>不方便的是每一行都要再设置一个背景色。
<table width="400" border="0" cellspacing="1" cellpadding="0"
 bgcolor="#000000">
  <tr bgcolor="#006600">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr bgcolor="#FFFFFF">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
<br />
< font>下面的细线表格是设置bordercolordark来实现的</font>，因为默认的border其实宽度是2，即使设置为1也没用，bordercolorlight和bordercolordark一起作为表格的边框。所以设置其中一个为背景色，表格边框看起来就会细一些。
<table width="400" border="1" cellspacing="0" cellpadding="0" 
bordercolor="#000000" bordercolordark="#FFFFFF">
  <tr bgcolor="#006600">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
<br />
<font>下面的表格是用css来实现的。</font><br />
css技巧比较多，列举几种：
A：设置border="1"、bordercolor，再加上style="border-collapse:collapse;"。style里面的内容就是css。
<table width="400" border="1" bordercolor="#000000" cellspacing="0"
 cellpadding="0" style="border-collapse:collapse;">
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
<br />
B：这个用css来设置边框，结果只显示表格的最外层边线。里面的线不显示。
<table width="400" cellspacing="0" cellpadding="0" 
style="border:#000000 1px solid;">
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
<br />
C: 如果你想要页面的所有表格都是细线表格，也不用一个一个去设置。因为这里是演示用，所以加上了id，你用的时候直接
 在head里面加上style标签，里面写 table {border-collapse:collapse;} td {border:#000000 1px solid;}，所有该页的table就都是细线了。
<style>
#tab1 {border-collapse:collapse;}
#tab1 td {border:#000000 1px solid;}
</style>
<table id="tab1" width="400">
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
<br />
<br />

<font>表格边框控制的其他方法(rules和frame)：</font><br />说明：<br />
1、这两个属性有时候设置会看不到作用，这是因为与表格边框的css设置冲突。所以说如果需要这些效果，并且还需要细线，那就用下面的方式来实现即设置这三个属性，border="1" bordercolor="#000000" style="border-collapse:collapse;"，然后再设置rules和frame，如果你测试到有其他的方法，希望能发布出来和大家共享。<br />
2、下面的效果只是我列举出来做演示用的，灵活设置这些属性可以做出更多效果。<br />
 rules="cols"的效果（中间的横线没有了）
<table width="400" border="1" bordercolor="#000000" 
style="border-collapse:collapse;" rules="cols">
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
<br />
frame="void"的效果（外边线没有了）
<table width="400" border="1" bordercolor="#000000" 
style="border-collapse:collapse;" frame="void">
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
<br />
rules和frame结合的效果(frame="hsides" rules="rows"，只留下横线)
<table width="400" border="1" bordercolor="#000000" 
style="border-collapse:collapse;" frame="hsides" rules="rows">
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

</body>
</html>

 

posted @ 2010-05-24 10:08  Athrun  阅读(1661)  评论(0)  编辑  收藏  举报