样式表边框仅在bootstrap中的表列上？

Question

鉴于下面的表格html，我想将我的表格设置为仅在表格周围设置边框，并且跨越列的边框不包括跨行的边框。

这是我已经拥有的：

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我在这里尝试完成如下：

我可以添加哪种引导样式和CSS样式来存档上面的结果？感谢。

Answer 1

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

.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

var nowDate = new Date();
        var creationDate = moment(nowDate);
        var expiresDate = moment(nowDate).utc();
        expiresDate.add(exdays, "d");
        var expires = "expires=" + expiresDate.toDate();