css 如何在Bootsrap表中为整条垂直线添加边框？

ocebsuys 于 2022-12-24 发布在其他

关注(0)|答案(1)|浏览(145)

我使用bootstrap，并制作了如下表格。
enter image description here
我想添加垂直红线像下面的照片。我也想添加红色线的阴影。
enter image description here
我如何实现这一点？
当前代码

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

css

来源：https://stackoverflow.com/questions/74903812/how-can-i-add-the-border-to-whole-vertical-th-line-in-bootsrap-table

1条答案

按热度按时间

htrmnn0y1#

下拉阴影会很棘手，因为框形阴影包含整个元素，而不仅仅是表格单元格的选定边，如图所示。但下面的代码应该适用于你的边框：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;
}

赞(0）回复(0）举报 2022-12-24

我来回答

css 如何在Bootsrap表中为整条垂直线添加边框？

1条答案

相关问题

热门标签

最新问答