Πίνακες Bootstrap 5

Βασική τάβλη

Μια βασική τάβλη Bootstrap 5 με μικρή εσωτερική απόσταση και οριζόντια διαχωριστικά γραμμές.

.table Προσθήκη βασικών στυλ στην τάβλη:

Παράδειγμα

Δοκιμάστε το προσωπικά

Γραμμώδεις γραμμές

.table-striped Προσθήκη ζιγκ-ζαγκ γραμμών στην τάβλη:

Παράδειγμα

Δοκιμάστε το προσωπικά

Τάβλη με πλαίσιο

.table-bordered Προσθήκη πλαίσιου σε όλες τις πλευρές της τάβλης και των κελιών:

Παράδειγμα

Δοκιμάστε το προσωπικά

Γραμμές με εφέ πτήσης

.table-hover Προσθήκη εφέ πτήσης στην γραμμή της τάβλης (χρωματιστό υπόβαθρο):

Παράδειγμα

Δοκιμάστε το προσωπικά

Μαύρη/σκοτεινή τάβλη

.table-dark Προσθήκη μαύρου υποβάθρου στην τάβλη:

Παράδειγμα

Δοκιμάστε το προσωπικά

Τάβλη με σκοτεινά μοτίβα

συνδυασμός .table-dark Και .table-striped Για να δημιουργήσετε μια σκοτεινή τάβλη με μοτίβα:

Παράδειγμα

Δοκιμάστε το προσωπικά

Τάβλη με σκοτεινό υπόβαθρο που μπορεί να πτήσει

.table-hover Προσθήκη εφέ πτήσης στην γραμμή της τάβλης (χρωματιστό υπόβαθρο):

Παράδειγμα

Δοκιμάστε το προσωπικά

Τάβλη χωρίς πλαίσιο

.table-borderless Κατάργηση του πλαισίου από τη τάβλη:

Παράδειγμα

Δοκιμάστε το προσωπικά

Κλάσεις περιβάλλοντος

Οι κλάσεις περιβάλλοντος μπορούν να χρησιμοποιηθούν για ολόκληρη τη τάβλη (<table>) ή γραμμή τάβλης (<tr>) ή κελί τάβλης (<td>) Χρωματισμός.

Παράδειγμα

Δοκιμάστε το προσωπικά

Διαθέσιμες κλάσεις περιβάλλοντος:

Κλάση Περιγραφή
.table-primary Μπλε: Σημαίνει σημαντική ενέργεια.
.table-success Πράσινο: Σημαίνει επιτυχία ή θετικές ενέργειες.
.table-danger Κόκκινο: Σημαίνει κίνδυνο ή πιθανές αρνητικές ενέργειες.
.table-info Γαλάζιο: Σημαίνει αλλαγή πληροφοριών ή ενέργειες που είναι ουδέτερες.
.table-warning Κίτρινο: Σημαίνει ότι μπορεί να χρειάζεται προσοχή.
.table-active Γκρι: Χρώμα πτήσης εφαρμόζεται στις γραμμές της τάβλης ή των κελιών της τάβλης.
.table-secondary Γκρι: Σημαίνει ότι η ενέργεια δεν είναι πολύ σημαντική.
.table-light Γκρι χρώμα τάβλης ή οπίσθιο χρώμα της γραμμής της τάβλης.
.table-dark Μαύρο γκρι τάβλη ή οπίσθιο χρώμα της γραμμής της τάβλης.

Χρώμα κεφαλίδας

Μπορείτε επίσης να χρησιμοποιήσετε οποιαδήποτε κλάση περιβάλλοντος για να προσθέσετε χρώμα στο τίτλο της τάβλης:

Παράδειγμα

Δοκιμάστε το προσωπικά

Μικρή τάβλη

.table-sm Η κλάση μειώνει το πλήρωμα των κελιών για να κάνει τη τάβλη μικρότερη:

Παράδειγμα

Δοκιμάστε το προσωπικά

Απανταγωνιστική τάβλη

.table-responsive Η κλάση προσθέτει γραμμή κύλισης στη τάβλη όταν χρειάζεται ( όταν είναι πολύ μεγάλη στον οριζόντιο άξονα):

Παράδειγμα

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Δοκιμάστε το προσωπικά

Μπορείτε επίσης να αποφασίσετε πότε η τάβλη θα πρέπει να αποκτήσει γραμμή κύλισης, ανάλογα με το πλάτος της οθόνης:

Κλάση Πλάτος οθόνης
.table-responsive-sm < 576px
.table-responsive-md < 768px
.table-responsive-lg < 992px
.table-responsive-xl < 1200px
.table-responsive-xxl < 1400px

Παράδειγμα

<div class="table-responsive-sm">
  <table class="table">
    ...
  </table>
</div>

Δοκιμάστε το προσωπικά