如何隐藏html表中行之间的边框，并使用css仅显示列之间的边框

Question

我有一个简单的html表，我只希望显示列之间的边框并隐藏行之间的边框。我尝试了下面的代码，但它没有实现我的目标。

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

＆＃13;

＆＃13;

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;
  }

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

你让th / td拥有“border：1px solid black”，但你只需要右边的边框

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">
    		<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 2

这就是你要找的东西

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">
    		<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 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">
    		<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>