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

我有一个简单的html表，我只想显示列之间的边界并隐藏行之间的边界。我尝试了下面的代码，但它没有达到我以后的样子。如何隐藏html表中的行之间的边界，并使用css仅显示列之间的边界

我也在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>

来源

2017-08-08 coder12345

这是你在找什么

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>

来源

2017-08-08 09:45:31

是由于吉希纳.. – coder12345

如果这是你所需要的，请勾选答案采用全 –

所做的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>

来源

2017-08-08 09:44:17

添加边框右侧只有

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>

来源

2017-08-08 09:48:55 veera

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

回答

相关问题