如何使用HTML在HTML表格中隐藏行之间的边框并仅显示列之间的边框

Question

我有一个简单的html表，我只想显示列之间的边框而隐藏行之间的边框。 我尝试了下面的代码，但没有达到我想要的。

我还使用了border-collapse : collapse在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

您将th / td设置为“ border：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"> <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>