如何隱藏html表中的行之間的邊界，並使用css僅顯示列之間的邊界

Question

我有一個簡單的html表，我只想顯示列之間的邊界並隱藏行之間的邊界。我嘗試了下面的代碼，但它沒有達到我以後的樣子。

我也在css中使用了border-collapse : collapse，但它似乎沒有工作。

table td, table th { border: 1px solid black; padding: 5px; } 
 

 
#items { clear: both; margin: 30px 0 0 0; border: 1px solid black; } 
 
#items th { background: #eee; } 
 
#items textarea { width: 300px; height: 50px; } 
 

 
#items,td { 
 
    border-collapse: collapse; 
 
    border-spacing: 0; 
 
    margin: 0; 
 
    padding: 0; 
 
    }

<table id="items"> 
 
    <thead> 
 
     <tr> 
 
      <th style="width:100px;">Slno</th> 
 
      <th style="width:300px;">Description of Goods</th> 
 
      <th style="width:120px;">Quantity</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody class="tbody"> 
 
     <tr> 
 
      <td>1</td> 
 
      <td>S1</td> 
 
      <td>3</td> 
 
     </tr> 
 
     <tr> 
 
      <td>2</td> 
 
      <td>S2</td> 
 
      <td>5</td> 
 
     </tr> 
 
     <tr> 
 
      <td>3</td> 
 
      <td>S3</td> 
 
      <td>5</td> 
 
     </tr> 
 
    </tbody> 
 
</table>

Answer 1

這是你在找什麼

table th { border: 1px solid black; padding: 5px; } 
 
table td{ padding: 5px; } 
 

 
#items { clear: both; margin: 30px 0 0 0; border: 1px solid black; } 
 
#items th { background: #eee; } 
 
#items textarea { width: 300px; height: 50px; } 
 

 
#items,td { 
 
    border-collapse: collapse; 
 
    border-spacing: 0; 
 
    margin: 0; 
 
    padding: 0; 
 
    }

<table id="items"> 
 
    \t \t <thead> 
 
    \t \t <tr> 
 
    \t \t  <th style="width:100px;">Slno</th> 
 
    \t \t  <th style="width:300px;">Description of Goods</th> 
 
    \t \t  <th style="width:120px;">Quantity</th> 
 
    \t \t  
 
    \t \t  
 
    \t \t 
 
    \t \t </tr> 
 
    \t \t </thead> 
 
    \t \t <tbody class="tbody"> 
 
    \t \t 
 
    \t \t <tr> 
 
       <td>1</td> 
 
       <td>S1</td> 
 
       <td>3</td> 
 
      </tr> 
 
    
 
     <tr> 
 
       <td>2</td> 
 
       <td>S2</td> 
 
       <td>5</td> 
 
      </tr> 
 
    \t \t  
 
    <tr> 
 
       <td>3</td> 
 
       <td>S3</td> 
 
       <td>5</td> 
 
       </tr> 
 
    \t \t 
 
    \t \t </tbody> 
 
    \t \t </table>

Answer 2

所做的TH/TD有 「邊界：1px的純黑色」，但你只需要右邊框

table td, table th {border-right: 1px solid black; padding: 5px; } 
 

 
#items { clear: both; margin: 30px 0 0 0; } 
 
#items th { background: #eee; } 
 
#items textarea { width: 300px; height: 50px; } 
 

 
#items,td { 
 
    border-collapse: collapse; 
 
    border-spacing: 0; 
 
    margin: 0; 
 
    padding: 0; 
 
    }

<table id="items"> 
 
    \t \t <thead> 
 
    \t \t <tr> 
 
    \t \t  <th style="width:100px;">Slno</th> 
 
    \t \t  <th style="width:300px;">Description of Goods</th> 
 
    \t \t  <th style="width:120px;">Quantity</th> 
 
    \t \t  
 
    \t \t  
 
    \t \t 
 
    \t \t </tr> 
 
    \t \t </thead> 
 
    \t \t <tbody class="tbody"> 
 
    \t \t 
 
    \t \t <tr> 
 
       <td>1</td> 
 
       <td>S1</td> 
 
       <td>3</td> 
 
      </tr> 
 
    
 
     <tr> 
 
       <td>2</td> 
 
       <td>S2</td> 
 
       <td>5</td> 
 
      </tr> 
 
    \t \t  
 
    <tr> 
 
       <td>3</td> 
 
       <td>S3</td> 
 
       <td>5</td> 
 
       </tr> 
 
    \t \t 
 
    \t \t </tbody> 
 
    \t \t </table>

Answer 3

添加邊框右側只有

table td, table th { border-right: 1px solid black; padding: 5px; } 
 

 
#items { clear: both; margin: 30px 0 0 0; border: 1px solid black; } 
 
#items th { background: #eee; } 
 
#items textarea { width: 300px; height: 50px; } 
 

 
#items,td { 
 
    border-collapse: collapse; 
 
    border-spacing: 0; 
 
    margin: 0; 
 
    padding: 0; 
 
    }

<table id="items"> 
 
    \t \t <thead> 
 
    \t \t <tr> 
 
    \t \t  <th style="width:100px;">Slno</th> 
 
    \t \t  <th style="width:300px;">Description of Goods</th> 
 
    \t \t  <th style="width:120px;">Quantity</th> 
 
    \t \t  
 
    \t \t  
 
    \t \t 
 
    \t \t </tr> 
 
    \t \t </thead> 
 
    \t \t <tbody class="tbody"> 
 
    \t \t 
 
    \t \t <tr> 
 
       <td>1</td> 
 
       <td>S1</td> 
 
       <td>3</td> 
 
      </tr> 
 
    
 
     <tr> 
 
       <td>2</td> 
 
       <td>S2</td> 
 
       <td>5</td> 
 
      </tr> 
 
    \t \t  
 
    <tr> 
 
       <td>3</td> 
 
       <td>S3</td> 
 
       <td>5</td> 
 
       </tr> 
 
    \t \t 
 
    \t \t </tbody> 
 
    \t \t </table>