Abgerundete Tabellen in Twitter Bootstrap 3
Bootstrap 3 gesunken abgerundeten Ecken, auf den Tischen. Welche Stile soll ich anwenden, um Sie zurück zu bekommen, wenn ich das .table-bordered
Klasse, bitte?
UPDATE
Bisher habe ich diesen code, ohne Wirkung.
CSS genommen von Bootstrap 2.3.2:
.table-bordered
{
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.table-bordered thead:first-child tr:first-child > th:first-child, .table-bordered tbody:first-child tr:first-child > td:first-child, .table-bordered tbody:first-child tr:first-child > th:first-child
{
-webkit-border-top-left-radius: 4px;
border-top-left-radius: 4px;
-moz-border-radius-topleft: 4px;
}
.table-bordered thead:last-child tr:last-child > th:first-child, .table-bordered tbody:last-child tr:last-child > td:first-child, .table-bordered tbody:last-child tr:last-child > th:first-child, .table-bordered tfoot:last-child tr:last-child > td:first-child, .table-bordered tfoot:last-child tr:last-child > th:first-child
{
-webkit-border-bottom-left-radius: 4px;
border-bottom-left-radius: 4px;
-moz-border-radius-bottomleft: 4px;
}
HTML-code:
<table class="table table-hover table-responsive table-bordered">
<thead>
<tr>
<th style="width: 50%">
Config. Name
</th>
<th>
API Calls
</th>
<th>
Current Amount
</th>
<th>
Actions
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a href="/searchsources/details">Agennda</a>
</td>
<td>
2,876
</td>
<td>
$ 80.67
</td>
<td>
<a href="/searchsources/details">Edit</a>
</td>
</tr>
</tbody>
</table>
InformationsquelleAutor der Frage Phillippe Santana | 2013-09-10
Du musst angemeldet sein, um einen Kommentar abzugeben.
Wenn Sie umgeben, den Tisch mit einer Platte, die Sie erhalten, Ihre abgerundeten Ecken.
Wie diese:
InformationsquelleAutor der Antwort Carsten Hess
"table-responsive" geht auf ein div, die umschließt die Tabelle, nicht die Tabelle selbst.
In normalisieren.weniger gibt es die Tabelle zurücksetzen die include-border-collapse:collapse. Dies war nicht in der 2.x von Bootstrap. Aufgrund dieser neuen reset, es gibt keine abgerundeten Ecken sind diese border-collapse:separate. Sie haben, um eine separate Klasse und stellen Sie es entsprechend.
Funktioniert nur mit "table-hover" und "table-striped" NICHT-Tisch-grenzt. Die Grenzen sind in diesem Stil.
WENIGER
InformationsquelleAutor der Antwort Christina
Mit CHRISTINAS Antwort und diese thread ich kam mit dieser CSS, um die abgerundeten Ecken in Tabellen mit oder ohne THEAD.
InformationsquelleAutor der Antwort Alen Oblak
Ich nehme an, Sie sind nicht mit der Quelle weniger-Dateien. Jedoch normalisieren.less, bootstrap 3.0 RC hinzufügen:
Diese border-collapse Sache zerstört die abgerundeten Ränder auf den Tischen.
Also, einfach durch überschreiben, die in der Tabelle umrandet biegen Sie auf die Wirkung:
Ich denke, es kann funktionieren.
InformationsquelleAutor der Antwort Joakim Poromaa Helger
Zuliebe bootstrappiness:
InformationsquelleAutor der Antwort Ruben Stolk
Folgendes funktioniert ganz gut für mich:
Obwohl es nicht natürlich Arbeit, die verschachtelte Tabellen.
InformationsquelleAutor der Antwort Antti Haapala
Wenn Sie nur 1 Zelle in der ersten Zeile oder der letzten Zeile dieser Arbeit.
(Hinzugefügt ein Update der code von: Ruben Stolk)
InformationsquelleAutor der Antwort Mathias Dewelde
Die Antwort oben auf die Verpackung der Tisch mit einer Platte (
<div class="panel panel-default">
) scheint zu funktionieren am besten.Jedoch, wie bereits erwähnt in den Kommentaren, die Sie tun müssen, entfernen Sie die Obere Grenze auf den Tisch.
Habe ich dieses SCSS dies zu tun, also dachte ich würde teilen:
InformationsquelleAutor der Antwort asgeo1
Dies ist eine andere Lösung vielleicht viel einfacher als die oben diejenigen. Dies wird dann die erste und Letzte
th
Elemente und wenden Sie eine Grenze zu Ihren jeweiligen Ecken. Können Sie fügen Sie dann einen radius für die gesamte Tabelle.InformationsquelleAutor der Antwort James Byrne
Verwenden Tisch-grenzt-gebogene statt Tabelle umrandet
InformationsquelleAutor der Antwort user1713785