如何使用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>