将table的border变细的三种方法

将table的border变细的三种方法http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>http://www.w3.org/1999/xhtml”>                       将table的border变细                             table{width:200px;heig

<!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=gb2312″ />
           <title>将table的border变细</title>

               <style type=”text/css”>
                 table{ width:200px; height:100px; margin:20px 0px 0px 0px}
                 TD{ height:50px; text-align:center}
                 .table1 Td{ background-color:#FFFFFF; }
                 .table2{ border-collapse:collapse;}
                 .table3{ border-collapse: collapse; border:none;}
                 .table3 Td{ border: red solid  1px ;}
        
</style>


     </head>

 

     <body>
             <!–table样板–>
             <table class=”Model” border=”1″ cellpadding=”0″ cellspacing=”0″ >
                 <tr>
                     <td>table样板</td>
                     <td>table样板 </td>
                </tr>
  
                <tr>
                    <td>table样板 </td>
                    <td>table样板 </td>
                </tr>
 </table>

 
 
       <!–根据table的背景色和单元格之间的间隔以及table td的背景色来将table的border变细 

                   注:td要设置heigth 否则交界线很粗–>
    <table class=”table1″ border=”0″ cellpadding=re”0″ cellspacing=”1″ bgcolor=”red” >
           <tr>
                 <td >边框变细1</td>
                 <td >边框变细1 </td>
         </tr>
  
         <tr>
               <td >边框变细1</td>
               <td >边框变细1 </td>
        </tr>
 </table> 

 
         <!–将table的border合并 注:边框不易设置颜色(很明显border出现了两种颜色)–>
    <table class=”table2″  border=”1″ bordercolor=”#FF0000″ >
         <tr>
                <td >边框变细2</td>
                <td >边框变细2</td>
         </tr>
  
         <tr>
               <td >边框变细2</td>
               <td >边框变细2</td>
        </tr>
 </table>

 
 
           <!–设置td border的样式 前提(将table的border设置为none 以及border合并) –>
  <table class=”table3″   >
       <tr>
             <td >边框变细3</td>
              <td>边框变细3</td>
      </tr>
  
      <tr>
              <td>边框变细3</td>
              <td>边框变细3</td>
       </tr>
 </table>
</body>
</html>

 

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/34310.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注