为 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 许可协议

阅读 591

#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; }

<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>

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

你尚未登录，登录后可以

CSS如何让指定的某个Tag不显示（比如：display=none），但是还是占有位置呢？

如何实现类似豆包的AI改写框跟随内容滚动效果？

body :first-child(不是body:first-child，中间有空格)伪类选择器到底选中了什么元素？

问一个鼠标滚动事件，这种是怎么实现的？

如何在CSS中实现滚动条不溢出圆角框？

css如何设置纵向滚动条的高度？

form对象根据表单dom元素的name属性获取元素对象是基于什么标准的？兼容性如何？

Stack Overflow 翻译