Бутстрап 4 стола с прозрачной каймой

Question

Я пытаюсь сделать границу между строками прозрачной, чтобы цвет фона страницы просвечивал.

Границы взяты из td, а цвет фона - из tr, поэтому, если я сделаю границу td прозрачной, фон tr будет просвечивать. Я попытался удалить третью границу и использовать только границу tr, но мне кажется, что я не могу отобразить границу.

Рассмотрим следующую таблицу, используя стандартный загрузчик 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. Это раскрашивает нечетные строки, где стандартные бустраповые полосатые цвета выстраивают четные строки. Он также пытается отобразить прозрачную границу как на 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 и установил его в «Отдельный», который все еще не отображал границу на 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>