为 Bootstrap 4 表创建带边界半径的边界答案

【问题标题】：Creating a border with border-radius for Bootstrap 4 tables为 Bootstrap 4 表创建带边界半径的边界
【发布时间】：2018-04-16 00:04:36
【问题描述】：

我目前正在改进 Bootstrap 4 中的表格设计。由于它是一个 Node 应用程序，我们选择使用把手 (.hbs)。使用 CSS 我可以改变表格的宽度，但我还没有设法创建改进设计所需的边框或圆角。我正在使用来自https://cdn.datatables.net/ 的 CDN 我不确定它是否会以任何方式影响这一点。

为什么没有按预期工作？在使用车把时，我是否必须以不同的方式编写 CSS，还是代表我有任何更简单的错误？

我包括了一些头部。但我忽略了 Bootstrap 和 jQuery 的 CDN：

HBS / (HTML)

  <!-- DataTables CDN -->
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap4.min.css"/>
    <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap4.min.js"></script>

    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Abril+Fatface" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Karla" rel="stylesheet">
    <!-- JS -->
    <script src="../public/javascripts/dataTables.js"></script>
    <title>Continuous integration Test Results</title>
</head>

<body id="resultsPage" onload>
      <header>
    </header>
    <main>
    <div class="container-fluid">
        <div id="resultsTable">
            <div class="table-responsive">
                <table class="table table-striped table-sm table-bordered">
                    <thead id="semiBlackHead">
                    <tr>
                        <th class="col-md-5ths col-xs-6">Project</th>
                        <th class="col-md-5ths col-xs-6">Last push</th>
                        <th class="col-md-2ths col-xs-6">Bugs</th>
                        <th class="col-md-2ths col-xs-6">Style errors</th>
                        <th class="col-md-5ths col-xs-6">Details</th>
                    </tr>
                    </thead>
                    <tbody id="bleachedBody">
                    {{{insertRow}}}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</main>

CSS

#semiBlackHead {
    background: rgba(0, 0, 0, 0.8) !important;

}
#bleachedBody {
    background-color: rgba(255, 255, 255, 0.9);
    background-size: cover;
    text-align: center;
    background-blend-mode: soft-light;

}
    #resultsTable {
        border-radius: 25px !important;                       /* not working */
        border-width: 5px !important;                        /* not working */
        border: rgba(0, 128, 255, 0.9) !important;          /* not working */
        width: 90%;  /*Tested and working as expected: */
        padding-top: 1%;
        margin: 0px auto;
        float: none;
    }
}

table.dataTable thead .sorting:before, table.dataTable thead .sorting:after, table.dataTable thead .sorting_asc:before, table.dataTable thead .sorting_asc:after, table.dataTable thead .sorting_desc:before, table.dataTable thead .sorting_desc:after {
    padding: 5px;
}

.dataTables_wrapper .mdb-select {
    border: none;
}

.dataTables_wrapper .mdb-select.form-control {
    padding-top: 0;
    margin-top: -1rem;
    margin-left: 0.7rem;
    margin-right: 0.7rem;
}

.dataTables_length label {
    display: flex;
    justify-content: left;
}

.dataTables_filter label {
    margin-bottom: 0;
}

.dataTables_filter label input.form-control {
    margin-top: -0.6rem;
    padding-bottom: 0;
}

table.dataTable {
    margin-bottom: 3rem !important;
}

div.dataTables_wrapper div.dataTables_info {
    padding-top: 0;
}

【问题讨论】：

标签： html css handlebars.js bootstrap-4

【解决方案1】：

您需要将border 更改为border-color 并添加border-style

#resultsTable {
  border-radius: 25px !important;
  border-width: 5px !important;
  border-style: solid !important;
  border-color: rgba(0, 128, 255, 0.9) !important;
  width: 90%;  /*Tested and working as expected: */
  padding-top: 1%;
  margin: 0px auto;
  float: none;
}

或将它们合二为一：

border: 5px solid rgba(0, 128, 255, 0.9) !important;

【讨论】：

我听从了建议，发生了最奇怪的事情：link。边框标记了 div，resultsTable 的边缘，因此这个区域得到了边框，而不是实际的数据表。
如果你想要表格，你需要像这样在你的css中定位表格：.table { ... }或#resultsTable .table { ... }。我只针对 #resultsTable 因为它是您在示例中使用的那个。
在我的例子中，边框半径不适用，因为 .table 会折叠表格单元格的边框。要获得圆角，请将border-spacing: 0px; border-collapse: separate; 添加到表格中

【解决方案2】：

这是一种使用 Bootstrap 4 实现圆角表格的简单方法。注意包装“卡片”类，这是为表格提供圆角的原因。这个新类取代了以前在 Bootstrap 3 中允许圆角的“面板面板默认”类。您可以使用自己的默认样式覆盖此类的样式

<div class="card">
    <div class="table-responsive">
        <table class="table table-bordered table-striped">
            <thead>
                <tr>
                   <th scope="col">#</th>
                   <th scope="col">First</th>
                   <th scope="col">Last</th>
                   <th scope="col">Handle</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                  <th scope="row">1</th>
                  <td>Mark</td>
                  <td>Otto</td>
                  <td>@mdo</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

【讨论】：

这是一个快速的好技巧。谢谢！

【解决方案3】：

我知道这个问题很老，但我遇到了同样的问题并找到了解决方案！

我使用的表是类：table table-striped table-bordered。因为我注意到这张表没有边框，所以我添加了 bordered 类，这样我就可以使用它们了。

表格仍然只有顶部的边框等等css：

 border-top-right-radius: 15px;
 border-top-left-radius: 15px;

添加此行时要小心，因为它不接受颜色或样式等任何属性，这意味着border-top-right-radius: 15px solid red ; WON'T WORK

所以对于html：

<table class="table table-striped table-bordered">

对于css：

.table-bordered {
    border-top-right-radius: 15px;
    border-top-left-radius: 15px;
}

【讨论】：