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 */ 
}