Question

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

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

我包括了一些头脑。但我遗漏了CDN for Bootstrap和jQuery：

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

Answer 1

这是使用Bootstrap 4实现带有圆角的表的一种简单方法。请注意包装器“ card”类，这是使表具有圆角的原因。这个新类替代了以前在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>

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

Answer 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 ;无法正常工作

对于html：

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

以及CSS：

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

为Bootstrap 4表

3 个答案: