读书人

TABLE怎么让某行无边框

发布时间: 2012-03-11 18:15:39 作者: rapoo

TABLE如何让某行无边框
就是除了最后一行外,其余的都是有边框的
该如何实现呢?
要求全浏览器的...

[解决办法]
上代码,自己研究

HTML code
<!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>test</title><style type="text/css">table{ border-collapse:collapse;}table td{ border:1px solid #CCCCCC;}</style></head><body><table width="500" border="0" cellspacing="0" cellpadding="0">  <tr>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>  </tr>  <tr>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>  </tr>  <tr>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>  </tr>  <tr>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>  </tr>  <tr>    <td style="border-bottom:none"> </td>    <td style="border-bottom:none"> </td>    <td style="border-bottom:none"> </td>    <td style="border-bottom:none"> </td>    <td style="border-bottom:none"> </td>  </tr></table></body></html>
[解决办法]
感觉这样更好一些

HTML code
<!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=gb_2312" /><title>暂时没有标题</title><style>table, tr, td { padding:0; margin:0;}#test { border:1px solid #f00; border-width:1px 0px 0px 1px; border-collapse:collapse; cell-padding:0; cell-spacing:0; height:150px; margin:100px auto; width:500px;}#test tr { border:0;}#test tr td { background:#ccc; border:1px solid #f00; border-width:0px 1px 1px 0px; text-align:center; text-valign:center;}</style></head><body><table id="test">    <tr>        <td>1.1</td>        <td>1.2</td>        <td>1.3</td>        <td>1.4</td>        <td>1.5</td>    </tr>    <tr>        <td>2.1</td>        <td>2.2</td>        <td>2.3</td>        <td>1.4</td>        <td>1.5</td>    </tr>    <tr>        <td>3.1</td>        <td>3.2</td>        <td>3.3</td>        <td>1.4</td>        <td>1.5</td>    </tr></table></body></html>
[解决办法]
HTML code
<!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=gb_2312" /><title>暂时没有标题</title><style>table, tr, td { padding:0; margin:0;}#test { border:0px solid #f00; border-collapse:collapse; cell-padding:0; cell-spacing:0; height:150px; margin:100px auto; width:500px;}#test tr td { background:#ccc; border:1px solid #f00; text-align:center; text-valign:center;}#test tr.last td{border:0px solid blue;}</style></head><body><table id="test">    <tr>        <td>1.1</td>        <td>1.2</td>        <td>1.3</td>        <td>1.4</td>        <td>1.5</td>    </tr>    <tr>        <td>2.1</td>        <td>2.2</td>        <td>2.3</td>        <td>1.4</td>        <td>1.5</td>    </tr>    <tr class="last">        <td>3.1</td>        <td>3.2</td>        <td>3.3</td>        <td>1.4</td>        <td>1.5</td>    </tr></table></body></html> 

读书人网 >CSS

热点推荐