Question

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

边界来自td，背景颜色来自tr，因此，如果我将td边界设为透明，则tr的背景将显示出来。我尝试过删除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>

因此，我使用了边框折叠，并将其设置为“ 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>

Answer 1

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

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>

带有透明边框的Bootstrap 4表

1 个答案: