如何將邊框添加到 Bootsrap 表中的整個垂直行？

Question

我使用 bootstrap 並制作了如下表格。

在此處輸入圖像描述

我想添加垂直紅線，如下圖所示。 我還想用紅線添加陰影。

在此處輸入圖像描述

我該如何實施？

當前代碼

  <table class="table">
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">First</th>
        <th scope="col">Last</th>
        <th scope="col">Handle</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
      </tr>
      <tr>
        <th scope="row">1</th>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
      </tr>
    </tbody>
  </table>  

Answer 1

陰影會很棘手，因為框陰影包含整個元素，而不僅僅是表格單元格的選定邊，如此處所示。 但是這段代碼應該適用於你的邊界： https ://codepen.io/richiegarcia/pen/abjOXwB

    table {
border-collapse: collapse;
text-align: left;
}
td, th {
padding: 10px;
width: 10%;
border: 1px solid #ccc;
}
th:last-child {
    border-top: 5px solid red;
}
th:last-child,
td:last-child {
border-left: 5px solid red;
border-right: 5px solid red;
}
td:last-child {
border-left: 5px solid red;
border-right: 5px solid red;
}
tr:last-child td:last-child {
border-bottom: 5px solid red;
}