样式表边框仅在引导程序中的表列上显示？

Question

给定以下html表格，我想将表格的样式设置为仅在表格周围有边框，在列之间具有边框，而在行之间则没有边框。

这是我已经拥有的：

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <table class="table-bordered"> <tbody> <tr> <td style="width:30%"> <p>The right-hand thumb "C"</p> </td> <td style="width:30%"> <p>Right-handed thumb "B"</p> </td> <td style="width:30%"> <p>Representatives of "A"</p> </td> </tr> <tr> <td> <p>You pay the mortgage</p> </td> <td> <p>Borrower (Please note: we have actually received the correct merchandise from the supplier)</p> </td> <td> <p>Signature and stamp</p> </td> </tr> <tr> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> <tr> <td> <p>Name ..................... ..</p> </td> <td> <p>Seang Chhay and Song Heng</p> </td> <td>&nbsp;</td> </tr> </tbody> </table> 

正如我试图做到的，如下所示：

我可以在结果上方添加哪种引导样式和CSS样式？ 谢谢。

Answer 1

您可以删除所有<thead> ， <tbody> ， <tr> ， <th>和<td>元素的border-top和border-bottom 。 您还应该使用其他类来仅更改选择的表。

 .only-table-and-columns td, .only-table-and-columns th, .only-table-and-columns tr, .only-table-and-columns thead, .only-table-and-columns tbody { border-bottom:0 !important; border-top:0 !important; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <table class="table-bordered only-table-and-columns"> <tbody> <tr> <td style="width:30%"> <p>The right-hand thumb "C"</p> </td> <td style="width:30%"> <p>Right-handed thumb "B"</p> </td> <td style="width:30%"> <p>Representatives of "A"</p> </td> </tr> <tr> <td> <p>You pay the mortgage</p> </td> <td> <p>Borrower (Please note: we have actually received the correct merchandise from the supplier)</p> </td> <td> <p>Signature and stamp</p> </td> </tr> <tr> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> <tr> <td> <p>Name ..................... ..</p> </td> <td> <p>Seang Chhay and Song Heng</p> </td> <td>&nbsp;</td> </tr> </tbody> </table> 

这也适用于Bootstrap 4：

 .only-table-and-columns td, .only-table-and-columns th, .only-table-and-columns tr, .only-table-and-columns thead, .only-table-and-columns tbody { border-bottom:0 !important; border-top:0 !important; } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <table class="table-bordered only-table-and-columns"> <tbody> <tr> <td style="width:30%"> <p>The right-hand thumb "C"</p> </td> <td style="width:30%"> <p>Right-handed thumb "B"</p> </td> <td style="width:30%"> <p>Representatives of "A"</p> </td> </tr> <tr> <td> <p>You pay the mortgage</p> </td> <td> <p>Borrower (Please note: we have actually received the correct merchandise from the supplier)</p> </td> <td> <p>Signature and stamp</p> </td> </tr> <tr> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> <tr> <td> <p>Name ..................... ..</p> </td> <td> <p>Seang Chhay and Song Heng</p> </td> <td>&nbsp;</td> </tr> </tbody> </table> 

Answer 2

您可以使用更容易理解的div

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

        <div class="container-fluid padding-0">
                <div class="row">
                  <div class="col-sm" style="border:1px solid black">
                        The right-hand thumb "C"
                        You pay the mortgage
                        Name ..................... ..
                  </div>
                  <div class="col-sm" style="border:1px solid black">

                  Right-handed thumb "B"
                  Borrower (Please note: we have actually received the correct merchandise from the supplier)

                  Seang Chhay and Song Heng
                  </div>
                  <div class="col-sm" style="border:1px solid black">
                        Representatives of "A"
                        Signature and stamp
                  </div>
                </div>
        </div>