如何做一个没有四边框线的表格_html/css_WEB-ITnose

css

想做一个表格 效果如下
不知道如何操作

回复讨论(解决方案)

        table
        {
            border: solid 1px black;
        }
        table tr td
        {
            border-left: 1px solid black;
            border-bottom: 1px solid black;
        }

<style>table.noouterborder td{border:solid 1px black;border-right:none;border-bottom:0px}table.noouterborder td.top{border-top:none}table.noouterborder td.left{border-left:none}</style><table class="noouterborder" cellpadding="5" cellspacing="0"><tr><td class="top left">1</td><td class="top">1</td><td class="top">1</td><td class="top">1</td><td class="top">1</td></tr><tr><td class="left">1</td><td>1</td><td>1</td><td>1</td><td>1<br />11</td></tr><tr><td class="left">1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td class="left">1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td class="left">1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr></table>

还可以简单点。。

<style>table.noouterborder td{border:solid 1px black;border-right:none;border-bottom:0px}table.noouterborder tr.top td{border-top:none}table.noouterborder td.left{border-left:none}</style><table class="noouterborder" cellpadding="5" cellspacing="0"><tr class="top"><td class="left">1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td class="left">1</td><td>1</td><td>1</td><td>1</td><td>1<br />11</td></tr><tr><td class="left">1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td class="left">1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td class="left">1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr></table>

td {            border-right:1px solid #ccc;            border-bottom:1px solid #ccc;            width:50px;            height:50px;        }        table {            border-collapse:collapse;            empty-cells:show;        }        td:last-child {            border-right:none;        }        tr:last-child td {            border-bottom:none;        }

<table>       <tr>           <td></td>           <td></td>           <td></td>       </tr>       <tr>           <td></td>           <td></td>           <td></td>       </tr>        <tr>           <td></td>           <td></td>            <td></td>       </tr>   </table>

因为单元格没有内容，所以你实际上可以去掉
width,height
及empty-cells

因为单元格没有内容，所以你实际上可以去掉
width,height
及empty-cells
单元格实际上是有内容的

因为单元格没有内容，所以你实际上可以去掉
width,height
及empty-cells
单元格实际上是有内容的

晕，我说我写的td中没有内容。

因为单元格没有内容，所以你实际上可以去掉
width,height
及empty-cells
单元格实际上是有内容的

晕，我说我写的td中没有内容。

多谢指点, 这样的功能是否能用JS 或者jq 来实现呢

可以使用jquery来实现，当然也就可以通过js来实现。

jquery的选择器完全是遵守w3c标准的，所以我写的css选择器你一样可以用jquery的选择器来选择目标元素。

不过，不理解为什么要通过脚本来实现？

Extjs 的grid也可以设置border

"http://www.w3.org/TR/html4/strict.dtd">

关键代码：

<script type="text/javascript" src="jquery-1.5.2.min.js"></script><style>    table{border-collapse:collapse;}    table td{border: 1px solid black;} </style> <table cellspacing="0" cellpadding="0" id="aaa">   <tr> <td>  </td><td>  </td><td>  </td>   </tr>    <tr> <td>  </td><td>  </td><td>  </td>   </tr>    <tr> <td>  </td><td>  </td><td>  </td>   </tr> </table> <script> $(function(){ setTblNo("aaa"); }) function setTblNo(tblid) {	var oTbl=$("#"+tblid);	oTbl.find("tr:first >td").css("border-top","none");//去掉上边框	oTbl.find("tr:last >td").css("border-bottom","none");//去掉下边框	oTbl.find("tr >td:first-child").css("border-left","none");//去掉左边框	oTbl.find("tr >td:last-child").css("border-right","none");//去掉右边框 } </script>

进测试 ，可行，jquery实现的