主页 / 问题 / 1601844
Accepted
Денис Матвеев
Asked:2024-12-07 14:25:21 +0000 UTC2024-12-07 14:25:21 +0000 UTC

如何使用 Bootstrap 4 制作圆边表格？

  • 772

有一张这样的桌子

<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-开头的属性），搜索栏、分页等也包裹在这个边框里，因为是表的一部分。如何仅将表格的边缘圆化，而不在其中包含辅助元素？

它看起来像什么

html

1 个回答

  1. Best Answer

    我不知道这和它有什么关系，有什么联系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：崩溃；所有这些美丽都依赖于它，将标准变成border了我们所看到的。但它有一个副作用，即不可能在没有伪影和副作用的情况下人为地圆化拐角。当然，尽管您可以将桌子包裹起来div，但谁需要这些废话呢？但是......如果你不能，但真的想要，那么在我看来，最简单的就是使用轮廓偏移为负值的笔划。

    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>

    • 1

相关问题