Как сделать таблицу со скруглёнными краями с помощью Bootstrap 4?

Question

Имеется вот такая таблица

<div class="table-responsive card">
    <table
    class="table table-sm align-middle"
    data-toggle="table"
    data-cookie="true"
    data-cookie-id-table="scripts"
    data-cookie-storage="localStorage"
    data-locale="ru-RU"
    data-sortable="true"
    data-search="true"
    data-pagination="true"
    data-pagination-v-align="top"
    data-page-list="[10, 20, 50, 100, all]"
    data-show-columns="true">
        <thead class="align-middle">
            <tr>
                <th data-sortable="true">Название</th>
                <th>Категория</th>
                <th>Описание</th>
            </tr>
        </thead>
        <tbody class="align-middle">
            {% for script in scripts %}
                <tr>
                    <td>
                        {{ script.name }}
                    </td>
                    <td>
                        {{ script.category }}
                    </td>
                    <td>
                        {{ script.description|default_if_none:"" }}
                    </td>
                </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

Нужно сделать ей закругленные края. Обернул её в div.card, края закруглились, но из-за использования bootstrap-table (атрибуты, начинающиеся на data-), строка поиска, пагинация и пр. тоже оборачиваются в эту границу, т.к. являются частью таблицы. Как можно скруглить края только у таблицы, а вспомогательные элементы не включать в неё?

Answer 1

Понятия не имею при чём тут и какая связь с bootstrap, но на вашем месте я бы попробовал сначала стилизовать без него, и заодно выяснил бы причину такого поведения, а не обвинял бы в этом какие-то атрибуты (и между прочим всегда так и делаю). Попробуем?

table {
  width: 100%;
  border-collapse: collapse;
}
table th {
  border: 1px solid #666;
  padding: 0 3px;
}
table td {
  border: 1px solid #666;
  padding: 0 3px;
}


/* пытаемся скруглить, но увы — этот способ лишь обрежет наружный border */
table {
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid red;
}

<table>
  <thead>
     <tr>
      <th>col-1</th>
      <th>col-2</th>
      <th>col-3</th>
      <th>col-4</th>
    </tr>   
  </thead>
  <tbody>
    <tr>
      <td>col-1</td>
      <td>col-2</td>
      <td>col-3</td>
      <td>col-4</td>
    </tr>
    <tr>
      <td>col-1</td>
      <td>col-2</td>
      <td>col-3</td>
      <td>col-4</td>
    </tr>
  </tbody>
</table>

Собственно это и есть минимальный способ стилизации таблиц, для красоты линий, толщиной в 1px. Обратите внимание на самый важный нюанс — border-collapse: collapse; на котором и держится вся эта красота, превращающая стандартный border в то что мы видим. Вот только он имеет побочный эффект в виде того, что нельзя скруглить углы по человечески без артефактов и побочек. Хотя конечно можно обернуть таблицу в div, но кому этот гемор нужен? Но... если нельзя, но очень хочется, то самый простой, как мне кажется, это воспользоваться обводкой с outline-offset с отрицательным значением.

table {
  width: 100%;
  border-collapse: collapse;
}
table th {
  border: 1px solid #666;
  padding: 0 3px;
}
table td {
  border: 1px solid #666;
  padding: 0 3px;
}

/* новая попытка, но с другого бока */
table {
  border-radius: 8px;
  overflow: hidden;
  outline: 1px solid blue;
  outline-offset: -1px;
}

<table>
  <thead>
     <tr>
      <th>col-1</th>
      <th>col-2</th>
      <th>col-3</th>
      <th>col-4</th>
    </tr>   
  </thead>
  <tbody>
    <tr>
      <td>col-1</td>
      <td>col-2</td>
      <td>col-3</td>
      <td>col-4</td>
    </tr>
    <tr>
      <td>col-1</td>
      <td>col-2</td>
      <td>col-3</td>
      <td>col-4</td>
    </tr>
  </tbody>
</table>

БЛОГ НА HUSL

Как сделать таблицу со скруглёнными краями с помощью Bootstrap 4?

Ответы (1 шт):