为 Bootstrap 4 表格创建带有 border-radius 的边框

新手上路,请多包涵

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

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

我包括了一点头部。但我遗漏了 Bootstrap 和 jQuery 的 CDN:

哈佛商学院 / (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;
}

原文由 josefdev 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 584
2 个回答

您需要将 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;

原文由 Ricardo Ribeiro 发布,翻译遵循 CC BY-SA 3.0 许可协议

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

    <div class="table-responsive card">
        <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>

原文由 Benjamin Gakami 发布,翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题