时间戳

首页 > 解决方案 > 在引导表右侧创建垂直边框

html - 在引导表右侧创建垂直边框

问题描述

我正在尝试在<th>引导表之间插入一个短的右边框，但是我无法获得所需的结果。谁能帮我？

我的代码：

<div class="table-responsive">
    <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">3</th>
                <td>Larry</td>
                <td>the Bird</td>
                <td>@twitter</td>
            </tr>
        </tbody>
    </table>
</div>

CSS：

.table thead th {
    vertical-align: bottom;
    border-bottom: 2px solid #dee2e6;
    border-right: 2px solid black;
}

结果

期望的结果

标签： htmlcssbootstrap-4

解决方案

尝试这个

.table thead th {
    vertical-align: bottom;
     
}.table thead th span{float:right;color:#000;}
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"> <table class="table">
  <thead>
    <tr >
      <th scope="col">#<span> | </span></th>
      <th scope="col">First<span> | </span></th>
      <th scope="col">Last<span> | </span></th>
      <th scope="col">Handle<span> | </span></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">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

推荐阅读