嵌套表格：1px边框与css

我必须在主表中嵌套一个表，并获得“厚”的边界，其中下一个表与其包围的<td>对接。我只想要一个1px的边框。

我有这个，实际上：

table.outer{border:1px black solid; border-collapse: collapse;} 
td{border:1px black solid; border-collapse: collapse;} 
table.nexted{border:1px black solid; border-collapse: collapse;}

来源

2009-06-26 Paul

只要把border属性上td秒。如果你想要一个1px的边框，那就可以了;你不需要它在桌子上。

来源

2009-06-26 15:21:16 chaos

如果我正确理解你的话，你可以使用border-left，border-right，border-top和border-bottom来创建你想要的这些“特殊”情况。

例如，在你的嵌套表可以设置

border-left:0;

嵌套表的左侧得到一个“产生的” 1个像素边框。

来源

2009-06-26 15:22:19 anderstornvig

此页介绍了如何做到这一点非常好：http://www.visakopu.net/misc/table-border-css/

发生了什么事是对细胞的边框都撞在对方，会导致它有较厚的边框比实际上有。不是使用border-collapse属性，而是在表格本身设置一个边框，并且只在顶部和左侧设置边框，并为单元格设置边框的下部和右侧。

来源

2009-06-27 02:22:47 matt

给无边框样式为您的嵌套表

<!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> 
    <title></title> 
    <style type="text/css"> 
     table.outer 
     { 
      border: 1px black solid; 
      border-collapse: collapse; 
      width: 100%; 
     } 
     table.outer td 
     { 
      border: 1px black solid; 
      border-collapse: collapse; 
     } 
     table.nested, table.nested td 
     { 
      border-width: 0px; 
      border-collapse: collapse; 
      width: 100%; 
     } 
    </style> 
</head> 
<body> 
    <table class="outer"> 
     <tr> 
      <td> 
       <table class="nested"> 
        <tr> 
         <td> 
          &nbsp; 
         </td> 
         <td> 
          &nbsp; 
         </td> 
        </tr> 
        <tr> 
         <td> 
          &nbsp; 
         </td> 
         <td> 
          &nbsp; 
         </td> 
        </tr> 
       </table> 
      </td> 
      <td> 
       content 
      </td> 
     </tr> 
     <tr> 
      <td> 
       content 
      </td> 
      <td> 
       <table class="nested"> 
        <tr> 
         <td> 
          &nbsp; 
         </td> 
         <td> 
          &nbsp; 
         </td> 
        </tr> 
        <tr> 
         <td> 
          &nbsp; 
         </td> 
         <td> 
          &nbsp; 
         </td> 
        </tr> 
       </table> 
      </td> 
     </tr> 
    </table> 
</body> 
</html>

来源

2009-06-27 02:41:19 Rony

嵌套表格：1px边框与css

回答

相关问题