上善若水

水善利万物而不争
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

.NET 关于表格嵌套表格 表格边重复问题

Posted on 2012-09-04 22:13  董锡振  阅读(369)  评论(0)  编辑  收藏  举报

<!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 runat="server">    

<title>关于表格嵌套表格 表格边重复问题</title>    

<script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>   

<script  type="text/javascript">   

  $(function () {

        $(".main_table table tr:first-child td").css("border-top-style", "none");

        $(".main_table table tr td:first-child").css("border-left-style", "none");

    });    

</script>

<style type="text/css">   

      .main_table{    /* */   

            border-collapse:collapse;          

            border:1px solid #000000;     

       }      

      .main_table table{ border-collapse:collapse; }     

      .main_table td  {          

            padding:0px;           

            height:25px;          

            text-align:center;         

            border-style:solid none none solid;          

            border-width:1px;          

            border-color:#000000;     

      }      

      .main_table table tr:first-child td{ border-top-style:none;}   

      .main_table table tr td:first-child{ border-left-style:none;}      

      /*伪类 CSS*/ 

       a:link {color: #FF0000}  /* 未访问的链接 */      

       a:visited {color: #00FF00} /* 已访问的链接 */    

       a:hover {color: #FF00FF} /* 鼠标移动到链接上 */     

       a:active {color: #0000FF} /* 选定的链接 */    

</style>

</head>

<body>    

<form id="form1" runat="server">   

     <div>       

          <table style=" width:500px;background:#CFF;" class="main_table" >           

              <tr>

                    <td>

                           <table width="100%" style="background:#FFC;">           

                                 <tr>

                                        <td>1</td><td>2</td>

                                 </tr>

                                 <tr>

                                       <td>2</td><td>2</td>    

                                 </tr>                     

                             </table>              

                     </td>                

                     <td>2</td>               

                     <td>3</td>              

              </tr>              

              <tr>                

                    <td>2</td>           

                    <td>                

                           <table width="100%" style="background:#CF9;">       

                                      <tr>          

                                          <td>1</td>          

                                          <td>2</td>

                                           <td>3</td>

                                     </tr>  

                                     <tr>  

                                           <td>2</td>   

                                          <td>  

                                                 <table width="100%" style="background:#FFC;">

                                                            <tr>

                                                                  <td>1</td>

                                                                   <td>2</td>

                                                             </tr>

                                                             <tr>

                                                                    <td>2</td>

                                                                    <td>2</td>

                                                              </tr>

                                                       </table>

                                               </td>

                                               <td>3</td>

                                      </tr>

                                      <tr>  

                                               <td>3</td>

                                               <td>2</td>

                                               <td>3</td>

                                       </tr>

                         </table>  

                </td>               

                <td>3</td> 

             </tr>   

              <tr>

                     <td>3</td>                

                     <td>2</td>

                     <td>3</td>  

               </tr>        

       </table>           

      <p>  "This is text"¥      

               <a href="#">资料来源</a><a href="#">test</a></p>    

 </div>    

</form>

</body>

</html>

 

border-collapse       

设置表格的边框是否被合并为一个单一的边框。

border-collapse:collapse; 默认值：separate //分隔

版本：CSS2 JavaScript 语法：object.style.borderCollapse="collapse"

浏览器支持 所有主流浏览器都支持 border-collapse 属性。

可能的值 1.separate 默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。

            2.collapse 如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。 3.inherit 规定应该从父元素继承 border-collapse 属性的值。

常用的是：border-collapse:collapse;

注释： 1.任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。//继承      

         2.如果没有规定 !DOCTYPE，则 border-collapse 可能产生意想不到的结果。

CSS 伪类用于向某些选择器添加特殊的效果。

:first-child（首个子对象）

锚伪类 在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示， 这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。

a:link {color: #FF0000}  /* 未访问的链接 */

a:visited {color: #00FF00} /* 已访问的链接 */

a:hover {color: #FF00FF} /* 鼠标移动到链接上 */

a:active {color: #0000FF} /* 选定的链接 */

 资料参考：http://www.oschina.net/code/snippet_221374_8234