twitter-bootstrap - 带透明边框的 Bootstrap 4 表

问题描述

我试图使行之间的边界透明，以便页面背景的颜色显示出来。

边框来自 td，背景颜色来自 tr，所以如果我让 td 边框透明，则 tr 的背景会透出来。我已经尝试删除 th td 边框并仅使用 tr 边框，但我似乎无法让边框出现。

考虑下表，使用标准的 bootstrap 4.2 css：

<div style="background-color:white">
    <table class="table table-gap table-striped table-striped-alt">
        <tbody>
            <tr>
                <td>A</td><td>B</td>
            </tr>
            <tr>
                <td>C</td><td>D</td>
            </tr>
            <tr>
                <td>E</td><td>F</td>
            </tr>
        </tbody>
    </table>
</div>

我添加了自己的 CSS。这会为奇数行着色，而标准的 boostrap 表条带颜色为偶数行。它还尝试在 tr 和 th/td 上显示透明边框，但这不起作用：

<style type="text/css">   
    /*Color the alternating rows that table-striped does not
    .table-striped-alt tr:not(:nth-of-type(odd))
    {
        background-color: #007bff !important;
    } 

    .table-gap tr > *
    {
        border-top: 3px solid transparent !important;
    }
    .table-gap tr
    {
        border-top: 3px solid transparent !important;
    }
</style>

所以我尝试将 tr 边框更改为黄色，将 td/th 更改为红色，看看是否有任何影响。td/th 显示了边框，但是 tr 没有显示边框，而 td 做到了：

<style type="text/css">    
    .table-striped-alt tr:not(:nth-of-type(odd))
    {
        background-color: #007bff !important;
    }
    .table-gap tr > *
    {
        border-top: 3px solid red !important;
    }
    .table-gap tr
    {
        border-top:3px solid yellow !important
    }
</style>

所以我玩了border-collapse，并将其设置为'separate'，仍然没有在tr上显示边框。它实际上在所有单元格周围都有一个透明的间距。这是不可取的，因为我只想要单元格上方和下方的透明间距。

<style type="text/css">    
    .table-striped-alt tr:not(:nth-of-type(odd))
    {
        background-color: #007bff !important;
    }
    .table-gap tr > *
    {
        border-top: 3px solid red !important;
    }
    .table-gap tr
    {
        border-top:3px solid yellow !important
    }

    table
    {
     border-collapse:separate;
    }
</style>

标签： twitter-bootstrapbootstrap-4

表格边框可能很棘手。相反，只需将单元格隔开。

body {
  background-color: lightgreen;
}

.table {
  width: 100%;
  border-collapse: separate; /* boom */
  border-spacing: 0 5px; /* bam */
}

.table td {
  background-color: pink;
  border: 5px solid transparent;
}

.table-striped-alt tr:not(:nth-of-type(odd)) {
  background-color: #007bff !important;
}

.table-gap tr>* {
  border-top: 3px solid red !important;
}

.table-gap tr {
  border-top: 3px solid yellow !important
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" />

<div>
  <table class="table">
    <tbody>
      <tr>
        <td>A</td>
        <td>B</td>
      </tr>
      <tr>
        <td>C</td>
        <td>D</td>
      </tr>
      <tr>
        <td>E</td>
        <td>F</td>
      </tr>
    </tbody>
  </table>
</div>

twitter-bootstrap - 带透明边框的 Bootstrap 4 表

问题描述

解决方案

推荐阅读