CSS：如何刪除表中行的左右邊框？

Question

1）我需要制作一個表格，其中一行沒有這樣的邊框（這個表有3行，但實際上我的問題是，它有很多行）

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

我怎樣才能做到這一點？

2）我需要創建另一個具有不同行寬度的表。 但在這里我設置width: 350px; 對於td 。 那么對於新表，我該如何更改行寬？

 .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 ，然后將其從第二個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> 

---

您也可以使用以下規則，但在這種情況下無關緊要，因為您使用了border-collapse: collapse; 在table

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