CSS：如何删除表中一行的左右边界？

Question

1）我需要做一个表，没有边框一行像这样（此表有一个3行，但实际上在我的问题，它有很多行）

+---------+---------+    +---------+---------+ 
|   |   |    |   |   | 
+---------+---------+    +---------+---------+ 
|   |   |  --> 
+---------+---------+    +---------+---------+ 
|   |   |    |   |   | 
+---------+---------+    +---------+---------+ 

我该怎么办这个？

2）我需要创建另一个不同宽度的表格。但在这里，我为td设置了width: 350px;。所以对于新表格，我应该如何改变行宽？

.frame { 
 
    border-collapse: collapse; 
 
    margin-right: 80px; 
 
    height: 100%; 
 
    font-size: 11pt; 
 
} 
 

 
table, th, td{ 
 
    border-collapse: collapse; 
 
    border: 1px solid black; 
 
    margin-left:80px; 
 
} 
 

 
td { 
 
    vertical-align: top; 
 
    width: 350px; 
 
    height: 20px; 
 
    padding-left: 6px; 
 
    padding-bottom: 5px; 
 
} 
 

 
th { 
 
    width: 350px; 
 
    padding-left: 6px; 
 
}

<div class ='frame'> 
 
    <table style ='margin-top:20px; font-weight: bold'> 
 
     <tr> 
 
      <td>(0,1)</td> 
 
      <td>(0,2)</td> 
 
     </tr> 
 
     <tr> 
 
      <td>(1,0)</td> 
 
      <td>(1,1)</td> 
 
     </tr> 
 
     <tr> 
 
      <td>(3,0)</td> 
 
      <td>(3,1)</td> 
 
     </tr> 
 
    </table> 
 
</div>

Answer 1

这样，在卸下边框上table，在这种情况下，将其设置在td s，然后从第二tr的td小号

删除

.frame { 
 
    margin-right: 80px; 
 
    height: 100%; 
 
    font-size: 11pt; 
 
    margin-left:80px; 
 
} 
 

 
.tbl-special { 
 
    border-collapse: collapse; 
 
    margin-top:20px; 
 
    font-weight: bold 
 
} 
 

 
.tbl-special td { 
 
    vertical-align: top; 
 
    width: 350px; 
 
    height: 20px; 
 
    padding-left: 6px; 
 
    padding-bottom: 5px; 
 
    border: 1px solid black;  /* moved from "table, tr, td" rule */ 
 
} 
 

 
.tbl-special th { 
 
    width: 350px; 
 
    padding-left: 6px; 
 
} 
 

 
.tbl-special tr:nth-child(2) td { 
 
    border: none;     /* remove all borders on second row */ 
 
}

<div class ='frame'> 
 
    <table class='tbl-special'> 
 
     <tr> 
 
      <td>(0,1)</td> 
 
      <td>(0,2)</td> 
 
     </tr> 
 
     <tr> 
 
      <td>(1,0)</td> 
 
      <td>(1,1)</td> 
 
     </tr> 
 
     <tr> 
 
      <td>(3,0)</td> 
 
      <td>(3,1)</td> 
 
     </tr> 
 
    </table> 
 
</div>

---

你也可以使用下面的规则，尽管在这种情况下，它并不重要，因为你在table

.tbl-special tr:nth-child(2) td { 
    border-width: 1px 0;   /* remove left/right border on second row */ 
}