Erstellen eines Rahmens mit Rand-Radius für Bootstrap 4 Tabellen

Ich arbeite derzeit an der Verbesserung des Entwurfs einer Tabelle in Bootstrap 4. Da es eine Knoten-Anwendung ist, haben wir entschieden, mit Lenker (.hbs) zu arbeiten. Mit CSS kann ich die Breite der Tabelle ändern, aber es ist mir nicht gelungen, eine Umrandung oder abgerundete Ecken zu erzeugen, um das Design zu verbessern. Ich benutze CDN von https://cdn.datatables.net/ Ich bin unsicher, ob es in irgendeiner Weise wirkt.Erstellen eines Rahmens mit Rand-Radius für Bootstrap 4 Tabellen

Warum funktioniert es nicht wie erwartet? Muss ich das CSS etwas anders schreiben, während ich den Lenker benutze, oder sind es einfachere Fehler in meinem Namen?

Ich nehme ein bisschen den Kopf. Aber ich Weglassen der CDN für Bootstrap und 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; 
}

Quelle

2017-11-03 josefdev

Sie müssen border-border-color ändern und hinzufügen 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; 
}

oder sie miteinander kombinieren:

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

Quelle

2017-11-03 10:52:50

ich den Rat befolgt, und das Merkwürdigste passiert: [link] (https://pasteboard.co/GRWcIty.jpg). Der Rahmen markiert die Kanten des div, resultsTable, daher erhält dieser Bereich den Rahmen, aber nicht die eigentliche Datentabelle. – josefdev

Wenn Sie die Tabelle wollen, müssen Sie die Tabelle in Ihrem CSS wie folgt tarnen: '.table {...}' oder '#resultsTable .table {...}'. Ich habe nur auf _ # resultsTable_ abgezielt, weil es das ist, das Sie im Beispiel verwendet haben. –

Erstellen eines Rahmens mit Rand-Radius für Bootstrap 4 Tabellen

Antwort

Verwandte Themen