in English

Πίνακες

Τεκμηρίωση και παραδείγματα για το στυλ επιλογής πινάκων (δεδομένης της επικρατούσας χρήσης τους σε προσθήκες JavaScript) με το Bootstrap.

Σε αυτήν την σελίδα

ΣΦΑΙΡΙΚΗ ΕΙΚΟΝΑ

Λόγω της ευρείας χρήσης <table>στοιχείων σε γραφικά στοιχεία τρίτων, όπως τα ημερολόγια και τα εργαλεία επιλογής ημερομηνιών, οι πίνακες του Bootstrap είναι επιλέξιμοι . Προσθέστε τη βασική κλάση .tableσε οποιαδήποτε <table>και, στη συνέχεια, επεκτείνετε με τις προαιρετικές μας κατηγορίες τροποποιητών ή προσαρμοσμένα στυλ. Όλα τα στυλ πίνακα δεν κληρονομούνται στο Bootstrap, πράγμα που σημαίνει ότι οι ένθετοι πίνακες μπορούν να διαμορφωθούν ανεξάρτητα από το γονικό.

Χρησιμοποιώντας την πιο βασική σήμανση πίνακα, δείτε πώς .tableφαίνονται οι βασισμένοι πίνακες στο Bootstrap.

#	Πρώτα	τελευταίος	Λαβή
1	Σημάδι	Οθων	@mdo
2	Ιάκωβος	Θόρντον	@Λίπος
3	Larry the Bird		@κελάδημα

<table class="table">
  <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>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Παραλλαγές

Χρησιμοποιήστε κλάσεις με βάση τα συμφραζόμενα για να χρωματίσετε πίνακες, σειρές πινάκων ή μεμονωμένα κελιά.

Τάξη	Επικεφαλίδα	Επικεφαλίδα
Προκαθορισμένο	Κύτταρο	Κύτταρο
Πρωταρχικός	Κύτταρο	Κύτταρο
Δευτερεύων	Κύτταρο	Κύτταρο
Επιτυχία	Κύτταρο	Κύτταρο
Κίνδυνος	Κύτταρο	Κύτταρο
Προειδοποίηση	Κύτταρο	Κύτταρο
Πληροφορίες	Κύτταρο	Κύτταρο
Φως	Κύτταρο	Κύτταρο
Σκοτάδι	Κύτταρο	Κύτταρο

<!-- On tables -->
<table class="table-primary">...</table>
<table class="table-secondary">...</table>
<table class="table-success">...</table>
<table class="table-danger">...</table>
<table class="table-warning">...</table>
<table class="table-info">...</table>
<table class="table-light">...</table>
<table class="table-dark">...</table>

<!-- On rows -->
<tr class="table-primary">...</tr>
<tr class="table-secondary">...</tr>
<tr class="table-success">...</tr>
<tr class="table-danger">...</tr>
<tr class="table-warning">...</tr>
<tr class="table-info">...</tr>
<tr class="table-light">...</tr>
<tr class="table-dark">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="table-primary">...</td>
  <td class="table-secondary">...</td>
  <td class="table-success">...</td>
  <td class="table-danger">...</td>
  <td class="table-warning">...</td>
  <td class="table-info">...</td>
  <td class="table-light">...</td>
  <td class="table-dark">...</td>
</tr>

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

Η χρήση χρώματος για να προσθέσετε νόημα παρέχει μόνο μια οπτική ένδειξη, η οποία δεν θα μεταδοθεί στους χρήστες βοηθητικών τεχνολογιών – όπως οι συσκευές ανάγνωσης οθόνης. Βεβαιωθείτε ότι οι πληροφορίες που υποδηλώνονται με το χρώμα είναι είτε προφανείς από το ίδιο το περιεχόμενο (π.χ. το ορατό κείμενο), είτε περιλαμβάνονται με εναλλακτικά μέσα, όπως πρόσθετο κείμενο που είναι κρυμμένο με την .visually-hiddenτάξη.

Τονισμένα τραπέζια

Ριγέ σειρές

Χρησιμοποιήστε .table-stripedτο για να προσθέσετε λωρίδες ζέβρας σε οποιαδήποτε σειρά πίνακα εντός του <tbody>.

#	Πρώτα	τελευταίος	Λαβή
1	Σημάδι	Οθων	@mdo
2	Ιάκωβος	Θόρντον	@Λίπος
3	Larry the Bird		@κελάδημα

<table class="table table-striped">
  ...
</table>

Ριγέ κολώνες

Χρησιμοποιήστε .table-striped-columnsτο για να προσθέσετε λωρίδες ζέβρας σε οποιαδήποτε στήλη πίνακα.

#	Πρώτα	τελευταίος	Λαβή
1	Σημάδι	Οθων	@mdo
2	Ιάκωβος	Θόρντον	@Λίπος
3	Larry the Bird		@κελάδημα

<table class="table table-striped-columns">
  ...
</table>

Αυτές οι κλάσεις μπορούν επίσης να προστεθούν σε παραλλαγές πίνακα:

#	Πρώτα	τελευταίος	Λαβή
1	Σημάδι	Οθων	@mdo
2	Ιάκωβος	Θόρντον	@Λίπος
3	Larry the Bird		@κελάδημα

<table class="table table-dark table-striped">
  ...
</table>

#	Πρώτα	τελευταίος	Λαβή
1	Σημάδι	Οθων	@mdo
2	Ιάκωβος	Θόρντον	@Λίπος
3	Larry the Bird		@κελάδημα

<table class="table table-dark table-striped-columns">
  ...
</table>

#	Πρώτα	τελευταίος	Λαβή
1	Σημάδι	Οθων	@mdo
2	Ιάκωβος	Θόρντον	@Λίπος
3	Larry the Bird		@κελάδημα

<table class="table table-success table-striped">
  ...
</table>

#	Πρώτα	τελευταίος	Λαβή
1	Σημάδι	Οθων	@mdo
2	Ιάκωβος	Θόρντον	@Λίπος
3	Larry the Bird		@κελάδημα

<table class="table table-success table-striped-columns">
  ...
</table>

Σειρές με δυνατότητα αιώρησης

Προσθήκη .table-hoverγια να ενεργοποιήσετε μια κατάσταση αιώρησης σε σειρές πίνακα εντός ενός <tbody>.

#	Πρώτα	τελευταίος	Λαβή
1	Σημάδι	Οθων	@mdo
2	Ιάκωβος	Θόρντον	@Λίπος
3	Larry the Bird		@κελάδημα

<table class="table table-hover">
  ...
</table>

#	Πρώτα	τελευταίος	Λαβή
1	Σημάδι	Οθων	@mdo
2	Ιάκωβος	Θόρντον	@Λίπος
3	Larry the Bird		@κελάδημα

<table class="table table-dark table-hover">
  ...
</table>

Αυτές οι αιωρούμενες σειρές μπορούν επίσης να συνδυαστούν με την παραλλαγή ριγέ σειρών:

#	Πρώτα	τελευταίος	Λαβή
1	Σημάδι	Οθων	@mdo
2	Ιάκωβος	Θόρντον	@Λίπος
3	Larry the Bird		@κελάδημα

<table class="table table-striped table-hover">
  ...
</table>

Ενεργά τραπέζια

Επισημάνετε μια γραμμή ή ένα κελί πίνακα προσθέτοντας μια .table-activeκλάση.

#	Πρώτα	τελευταίος	Λαβή
1	Σημάδι	Οθων	@mdo
2	Ιάκωβος	Θόρντον	@Λίπος
3	Larry the Bird		@κελάδημα

<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    <tr class="table-active">
      ...
    </tr>
    <tr>
      ...
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2" class="table-active">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

#	Πρώτα	τελευταίος	Λαβή
1	Σημάδι	Οθων	@mdo
2	Ιάκωβος	Θόρντον	@Λίπος
3	Larry the Bird		@κελάδημα

<table class="table table-dark">
  <thead>
    ...
  </thead>
  <tbody>
    <tr class="table-active">
      ...
    </tr>
    <tr>
      ...
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2" class="table-active">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Πώς λειτουργούν οι παραλλαγές και οι τονισμένοι πίνακες;

Για τους τονισμένους πίνακες ( γραμμές με ρίγες , στήλες με ρίγες , σειρές με δυνατότητα αιώρησης και ενεργούς πίνακες ), χρησιμοποιήσαμε ορισμένες τεχνικές για να κάνουμε αυτά τα εφέ να λειτουργούν για όλες τις παραλλαγές του πίνακα :

Ξεκινάμε ορίζοντας το φόντο ενός κελιού πίνακα με την --bs-table-bgπροσαρμοσμένη ιδιότητα. Στη συνέχεια, όλες οι παραλλαγές πίνακα ορίζουν αυτήν την προσαρμοσμένη ιδιότητα για χρωματισμό των κελιών του πίνακα. Με αυτόν τον τρόπο, δεν μπαίνουμε σε μπελάδες εάν χρησιμοποιούνται ημιδιαφανή χρώματα ως φόντο του τραπεζιού.
Στη συνέχεια, προσθέτουμε μια σκιά πλαισίου εισαγωγής στα κελιά του πίνακα με box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);το στρώμα πάνω από οποιοδήποτε καθορισμένο background-color. Επειδή χρησιμοποιούμε τεράστιο άπλωμα και χωρίς θαμπάδα, το χρώμα θα είναι μονότονο. Εφόσον --bs-table-accent-bgδεν έχει οριστεί από προεπιλογή, δεν έχουμε σκιά προεπιλεγμένου πλαισίου.
Όταν προστίθενται κατηγορίες .table-striped, .table-striped-columns, .table-hoverή , η τιμή ορίζεται σε ένα ημιδιαφανές χρώμα για χρωματισμό του φόντου..table-active--bs-table-accent-bg
Για κάθε παραλλαγή πίνακα, δημιουργούμε ένα --bs-table-accent-bgχρώμα με την υψηλότερη αντίθεση ανάλογα με αυτό το χρώμα. Για παράδειγμα, το χρώμα έμφασης για .table-primaryείναι πιο σκούρο ενώ .table-darkέχει πιο ανοιχτό χρώμα.
Τα χρώματα κειμένου και περιγράμματος δημιουργούνται με τον ίδιο τρόπο και τα χρώματά τους κληρονομούνται από προεπιλογή.

Πίσω από τις σκηνές μοιάζει με αυτό:

@mixin table-variant($state, $background) {
  .table-#{$state} {
    $color: color-contrast(opaque($body-bg, $background));
    $hover-bg: mix($color, $background, percentage($table-hover-bg-factor));
    $striped-bg: mix($color, $background, percentage($table-striped-bg-factor));
    $active-bg: mix($color, $background, percentage($table-active-bg-factor));
    $border-color: mix($color, $background, percentage($table-border-factor));

    --#{$prefix}table-color: #{$color};
    --#{$prefix}table-bg: #{$background};
    --#{$prefix}table-border-color: #{$border-color};
    --#{$prefix}table-striped-bg: #{$striped-bg};
    --#{$prefix}table-striped-color: #{color-contrast($striped-bg)};
    --#{$prefix}table-active-bg: #{$active-bg};
    --#{$prefix}table-active-color: #{color-contrast($active-bg)};
    --#{$prefix}table-hover-bg: #{$hover-bg};
    --#{$prefix}table-hover-color: #{color-contrast($hover-bg)};

    color: var(--#{$prefix}table-color);
    border-color: var(--#{$prefix}table-border-color);
  }
}

Περιγράμματα τραπεζιού

Τραπέζια με περίγραμμα

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

#	Πρώτα	τελευταίος	Λαβή
1	Σημάδι	Οθων	@mdo
2	Ιάκωβος	Θόρντον	@Λίπος
3	Larry the Bird		@κελάδημα

<table class="table table-bordered">
  ...
</table>

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

#	Πρώτα	τελευταίος	Λαβή
1	Σημάδι	Οθων	@mdo
2	Ιάκωβος	Θόρντον	@Λίπος
3	Larry the Bird		@κελάδημα

<table class="table table-bordered border-primary">
  ...
</table>

Πίνακες χωρίς περιθώρια

Προσθήκη .table-borderlessγια πίνακα χωρίς περιθώρια.

#	Πρώτα	τελευταίος	Λαβή
1	Σημάδι	Οθων	@mdo
2	Ιάκωβος	Θόρντον	@Λίπος
3	Larry the Bird		@κελάδημα

<table class="table table-borderless">
  ...
</table>

#	Πρώτα	τελευταίος	Λαβή
1	Σημάδι	Οθων	@mdo
2	Ιάκωβος	Θόρντον	@Λίπος
3	Larry the Bird		@κελάδημα

<table class="table table-dark table-borderless">
  ...
</table>

Τραπεζάκια

Προσθέστε .table-smτο για να γίνει .tableπιο συμπαγές κόβοντας όλα τα κύτταρα paddingστη μέση.

#	Πρώτα	τελευταίος	Λαβή
1	Σημάδι	Οθων	@mdo
2	Ιάκωβος	Θόρντον	@Λίπος
3	Larry the Bird		@κελάδημα

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

#	Πρώτα	τελευταίος	Λαβή
1	Σημάδι	Οθων	@mdo
2	Ιάκωβος	Θόρντον	@Λίπος
3	Larry the Bird		@κελάδημα

<table class="table table-dark table-sm">
  ...
</table>

Διαιρέτες ομάδων τραπεζιών

Προσθέστε ένα παχύτερο περίγραμμα, πιο σκούρο μεταξύ των ομάδων πινάκων— <thead>, <tbody>, και <tfoot>—με .table-group-divider. Προσαρμόστε το χρώμα αλλάζοντας το border-top-color(για το οποίο δεν παρέχουμε αυτήν τη στιγμή μια κατηγορία βοηθητικών προγραμμάτων).

#	Πρώτα	τελευταίος	Λαβή
1	Σημάδι	Οθων	@mdo
2	Ιάκωβος	Θόρντον	@Λίπος
3	Larry the Bird		@κελάδημα

html

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody class="table-group-divider">
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Κατακόρυφη στοίχιση

Τα κελιά του πίνακα <thead>είναι πάντα κάθετα ευθυγραμμισμένα προς τα κάτω. Τα κελιά του πίνακα <tbody>κληρονομούν την ευθυγράμμισή τους <table>από προεπιλογή και ευθυγραμμίζονται στην κορυφή. Χρησιμοποιήστε τις κλάσεις κάθετης στοίχισης για να ευθυγραμμίσετε εκ νέου όπου χρειάζεται.

Επικεφαλίδα 1	Επικεφαλίδα 2	Κεφάλαιο 3	Κεφάλαιο 4
Αυτό το κελί κληρονομείται `vertical-align: middle;`από τον πίνακα	Αυτό το κελί κληρονομείται `vertical-align: middle;`από τον πίνακα	Αυτό το κελί κληρονομείται `vertical-align: middle;`από τον πίνακα	Αυτό εδώ είναι ένα κείμενο κράτησης θέσης, που προορίζεται να καταλαμβάνει αρκετό κατακόρυφο χώρο, για να δείξει πώς λειτουργεί η κατακόρυφη στοίχιση στα προηγούμενα κελιά.
Αυτό το κελί κληρονομείται `vertical-align: bottom;`από τη γραμμή του πίνακα	Αυτό το κελί κληρονομείται `vertical-align: bottom;`από τη γραμμή του πίνακα	Αυτό το κελί κληρονομείται `vertical-align: bottom;`από τη γραμμή του πίνακα	Αυτό εδώ είναι ένα κείμενο κράτησης θέσης, που προορίζεται να καταλαμβάνει αρκετό κατακόρυφο χώρο, για να δείξει πώς λειτουργεί η κατακόρυφη στοίχιση στα προηγούμενα κελιά.
Αυτό το κελί κληρονομείται `vertical-align: middle;`από τον πίνακα	Αυτό το κελί κληρονομείται `vertical-align: middle;`από τον πίνακα	Αυτό το κελί είναι ευθυγραμμισμένο στην κορυφή.	Αυτό εδώ είναι ένα κείμενο κράτησης θέσης, που προορίζεται να καταλαμβάνει αρκετό κατακόρυφο χώρο, για να δείξει πώς λειτουργεί η κατακόρυφη στοίχιση στα προηγούμενα κελιά.

<div class="table-responsive">
  <table class="table align-middle">
    <thead>
      <tr>
        ...
      </tr>
    </thead>
    <tbody>
      <tr>
        ...
      </tr>
      <tr class="align-bottom">
        ...
      </tr>
      <tr>
        <td>...</td>
        <td>...</td>
        <td class="align-top">This cell is aligned to the top.</td>
        <td>...</td>
      </tr>
    </tbody>
  </table>
</div>

Φωλιάζοντας

Τα στυλ περιγράμματος, τα ενεργά στυλ και οι παραλλαγές πίνακα δεν κληρονομούνται από ένθετους πίνακες.

Πρώτα

τελευταίος

Λαβή

Σημάδι

Οθων

@mdo

Επί κεφαλής	Επί κεφαλής	Επί κεφαλής
ΕΝΑ	Πρώτα	τελευταίος
σι	Πρώτα	τελευταίος
ντο	Πρώτα	τελευταίος

Λάρι

το πουλί

@κελάδημα

<table class="table table-striped">
  <thead>
    ...
  </thead>
  <tbody>
    ...
    <tr>
      <td colspan="4">
        <table class="table mb-0">
          ...
        </table>
      </td>
    </tr>
    ...
  </tbody>
</table>

Πώς λειτουργεί η ένθεση

Για να αποτρέψουμε τη διαρροή οποιωνδήποτε στυλ σε ένθετους πίνακες, χρησιμοποιούμε τον >επιλογέα θυγατρικού συνδυασμού ( ) στο CSS μας. Δεδομένου ότι πρέπει να στοχεύσουμε όλα τα tds και ths στο thead, tbody, και tfoot, ο επιλογέας μας θα φαινόταν αρκετά μεγάλος χωρίς αυτό. Ως εκ τούτου, χρησιμοποιούμε τον μάλλον περίεργο .table > :not(caption) > * > *επιλογέα για να στοχεύσουμε όλα τα tds και thτα s του .table, αλλά κανένα από τυχόν ένθετους πίνακες.

Σημειώστε ότι εάν προσθέσετε <tr>s ως απευθείας θυγατρικά ενός πίνακα, αυτά <tr>θα είναι τυλιγμένα σε ένα <tbody>από προεπιλογή, κάνοντας έτσι τους επιλογείς μας να λειτουργούν όπως προβλέπεται.

Ανατομία

Κεφαλή τραπεζιού

Παρόμοια με τους πίνακες και τους σκούρους πίνακες, χρησιμοποιήστε τις κλάσεις τροποποιητών .table-lightή .table-darkγια να κάνετε <thead>τα s να φαίνονται ανοιχτό ή σκούρο γκρι.

#	Πρώτα	τελευταίος	Λαβή
1	Σημάδι	Οθων	@mdo
2	Ιάκωβος	Θόρντον	@Λίπος
3	Λάρι	το πουλί	@κελάδημα

<table class="table">
  <thead class="table-light">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

#	Πρώτα	τελευταίος	Λαβή
1	Σημάδι	Οθων	@mdo
2	Ιάκωβος	Θόρντον	@Λίπος
3	Λάρι	το πουλί	@κελάδημα

<table class="table">
  <thead class="table-dark">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Επιτραπέζιο πόδι

#	Πρώτα	τελευταίος	Λαβή
1	Σημάδι	Οθων	@mdo
2	Ιάκωβος	Θόρντον	@Λίπος
3	Λάρι	το πουλί	@κελάδημα
Υποσέλιδο	Υποσέλιδο	Υποσέλιδο	Υποσέλιδο

<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
  <tfoot>
    ...
  </tfoot>
</table>

Λεζάντες

Το ένα <caption>λειτουργεί σαν επικεφαλίδα για έναν πίνακα. Βοηθά τους χρήστες με προγράμματα ανάγνωσης οθόνης να βρουν έναν πίνακα και να κατανοήσουν περί τίνος πρόκειται και να αποφασίσουν αν θέλουν να τον διαβάσουν.

Λίστα χρηστών
#	Πρώτα	τελευταίος	Λαβή
1	Σημάδι	Οθων	@mdo
2	Ιάκωβος	Θόρντον	@Λίπος
3	Larry the Bird		@κελάδημα

<table class="table table-sm">
  <caption>List of users</caption>
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Μπορείτε επίσης να βάλετε το <caption>στην κορυφή του τραπεζιού με .caption-top.

Λίστα χρηστών
#	Πρώτα	τελευταίος	Λαβή
1	Σημάδι	Οθων	@mdo
2	Ιάκωβος	Θόρντον	@Λίπος
3	Λάρι	το πουλί	@κελάδημα

html

<table class="table caption-top">
  <caption>List of users</caption>
  <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>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Αποκριτικοί πίνακες

Οι αποκριτικοί πίνακες επιτρέπουν την εύκολη κύλιση των πινάκων οριζόντια. Κάντε οποιονδήποτε πίνακα αποκριτικό σε όλες τις θύρες προβολής τυλίγοντας ένα .tableμε .table-responsive. Εναλλακτικά, επιλέξτε ένα μέγιστο σημείο διακοπής με το οποίο μπορείτε να έχετε έναν αποκριτικό πίνακα χρησιμοποιώντας το .table-responsive{-sm|-md|-lg|-xl|-xxl}.

Κατακόρυφη αποκοπή/περικοπή

Οι αποκριτικοί πίνακες χρησιμοποιούν το overflow-y: hidden, το οποίο αποκόπτει κάθε περιεχόμενο που υπερβαίνει το κάτω ή το επάνω άκρο του πίνακα. Συγκεκριμένα, αυτό μπορεί να αποκόψει τα αναπτυσσόμενα μενού και άλλα γραφικά στοιχεία τρίτων.

Πάντα ανταποκρινόμενο

Σε κάθε σημείο διακοπής, χρησιμοποιήστε .table-responsiveτο για οριζόντια κύλιση πινάκων.

#	Επικεφαλίδα	Επικεφαλίδα	Επικεφαλίδα	Επικεφαλίδα	Επικεφαλίδα	Επικεφαλίδα	Επικεφαλίδα	Επικεφαλίδα	Επικεφαλίδα
1	Κύτταρο	Κύτταρο	Κύτταρο	Κύτταρο	Κύτταρο	Κύτταρο	Κύτταρο	Κύτταρο	Κύτταρο
2	Κύτταρο	Κύτταρο	Κύτταρο	Κύτταρο	Κύτταρο	Κύτταρο	Κύτταρο	Κύτταρο	Κύτταρο
3	Κύτταρο	Κύτταρο	Κύτταρο	Κύτταρο	Κύτταρο	Κύτταρο	Κύτταρο	Κύτταρο	Κύτταρο

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

Συγκεκριμένο σημείο διακοπής

Χρησιμοποιήστε .table-responsive{-sm|-md|-lg|-xl|-xxl}το όπως απαιτείται για τη δημιουργία αποκριτικών πινάκων μέχρι ένα συγκεκριμένο σημείο διακοπής. Από αυτό το σημείο διακοπής και πάνω, ο πίνακας θα συμπεριφέρεται κανονικά και δεν θα κάνει κύλιση οριζόντια.

Αυτοί οι πίνακες μπορεί να εμφανίζονται σπασμένοι μέχρι να εφαρμοστούν τα στυλ απόκρισής τους σε συγκεκριμένα πλάτη θυρών προβολής.

#	Επικεφαλίδα	Επικεφαλίδα	Επικεφαλίδα	Επικεφαλίδα	Επικεφαλίδα	Επικεφαλίδα	Επικεφαλίδα	Επικεφαλίδα
1	Κύτταρο	Κύτταρο	Κύτταρο	Κύτταρο	Κύτταρο	Κύτταρο	Κύτταρο	Κύτταρο
2	Κύτταρο	Κύτταρο	Κύτταρο	Κύτταρο	Κύτταρο	Κύτταρο	Κύτταρο	Κύτταρο
3	Κύτταρο	Κύτταρο	Κύτταρο	Κύτταρο	Κύτταρο	Κύτταρο	Κύτταρο	Κύτταρο

#	Επικεφαλίδα	Επικεφαλίδα	Επικεφαλίδα	Επικεφαλίδα	Επικεφαλίδα	Επικεφαλίδα	Επικεφαλίδα	Επικεφαλίδα
1	Κύτταρο	Κύτταρο	Κύτταρο	Κύτταρο	Κύτταρο	Κύτταρο	Κύτταρο	Κύτταρο
2	Κύτταρο	Κύτταρο	Κύτταρο	Κύτταρο	Κύτταρο	Κύτταρο	Κύτταρο	Κύτταρο
3	Κύτταρο	Κύτταρο	Κύτταρο	Κύτταρο	Κύτταρο	Κύτταρο	Κύτταρο	Κύτταρο

#	Επικεφαλίδα	Επικεφαλίδα	Επικεφαλίδα	Επικεφαλίδα	Επικεφαλίδα	Επικεφαλίδα	Επικεφαλίδα	Επικεφαλίδα
1	Κύτταρο	Κύτταρο	Κύτταρο	Κύτταρο	Κύτταρο	Κύτταρο	Κύτταρο	Κύτταρο
2	Κύτταρο	Κύτταρο	Κύτταρο	Κύτταρο	Κύτταρο	Κύτταρο	Κύτταρο	Κύτταρο
3	Κύτταρο	Κύτταρο	Κύτταρο	Κύτταρο	Κύτταρο	Κύτταρο	Κύτταρο	Κύτταρο

#	Επικεφαλίδα	Επικεφαλίδα	Επικεφαλίδα	Επικεφαλίδα	Επικεφαλίδα	Επικεφαλίδα	Επικεφαλίδα	Επικεφαλίδα
1	Κύτταρο	Κύτταρο	Κύτταρο	Κύτταρο	Κύτταρο	Κύτταρο	Κύτταρο	Κύτταρο
2	Κύτταρο	Κύτταρο	Κύτταρο	Κύτταρο	Κύτταρο	Κύτταρο	Κύτταρο	Κύτταρο
3	Κύτταρο	Κύτταρο	Κύτταρο	Κύτταρο	Κύτταρο	Κύτταρο	Κύτταρο	Κύτταρο

#	Επικεφαλίδα	Επικεφαλίδα	Επικεφαλίδα	Επικεφαλίδα	Επικεφαλίδα	Επικεφαλίδα	Επικεφαλίδα	Επικεφαλίδα
1	Κύτταρο	Κύτταρο	Κύτταρο	Κύτταρο	Κύτταρο	Κύτταρο	Κύτταρο	Κύτταρο
2	Κύτταρο	Κύτταρο	Κύτταρο	Κύτταρο	Κύτταρο	Κύτταρο	Κύτταρο	Κύτταρο
3	Κύτταρο	Κύτταρο	Κύτταρο	Κύτταρο	Κύτταρο	Κύτταρο	Κύτταρο	Κύτταρο

#	Επικεφαλίδα	Επικεφαλίδα	Επικεφαλίδα	Επικεφαλίδα	Επικεφαλίδα	Επικεφαλίδα	Επικεφαλίδα	Επικεφαλίδα
1	Κύτταρο	Κύτταρο	Κύτταρο	Κύτταρο	Κύτταρο	Κύτταρο	Κύτταρο	Κύτταρο
2	Κύτταρο	Κύτταρο	Κύτταρο	Κύτταρο	Κύτταρο	Κύτταρο	Κύτταρο	Κύτταρο
3	Κύτταρο	Κύτταρο	Κύτταρο	Κύτταρο	Κύτταρο	Κύτταρο	Κύτταρο	Κύτταρο

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

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

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

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

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

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

Sass

Μεταβλητές

$table-cell-padding-y:        .5rem;
$table-cell-padding-x:        .5rem;
$table-cell-padding-y-sm:     .25rem;
$table-cell-padding-x-sm:     .25rem;

$table-cell-vertical-align:   top;

$table-color:                 var(--#{$prefix}body-color);
$table-bg:                    transparent;
$table-accent-bg:             transparent;

$table-th-font-weight:        null;

$table-striped-color:         $table-color;
$table-striped-bg-factor:     .05;
$table-striped-bg:            rgba($black, $table-striped-bg-factor);

$table-active-color:          $table-color;
$table-active-bg-factor:      .1;
$table-active-bg:             rgba($black, $table-active-bg-factor);

$table-hover-color:           $table-color;
$table-hover-bg-factor:       .075;
$table-hover-bg:              rgba($black, $table-hover-bg-factor);

$table-border-factor:         .1;
$table-border-width:          $border-width;
$table-border-color:          var(--#{$prefix}border-color);

$table-striped-order:         odd;
$table-striped-columns-order: even;

$table-group-separator-color: currentcolor;

$table-caption-color:         $text-muted;

$table-bg-scale:              -80%;

Βρόχος

$table-variants: (
  "primary":    shift-color($primary, $table-bg-scale),
  "secondary":  shift-color($secondary, $table-bg-scale),
  "success":    shift-color($success, $table-bg-scale),
  "info":       shift-color($info, $table-bg-scale),
  "warning":    shift-color($warning, $table-bg-scale),
  "danger":     shift-color($danger, $table-bg-scale),
  "light":      $light,
  "dark":       $dark,
);

Προσαρμογή

Οι μεταβλητές παράγοντα ( $table-striped-bg-factor, $table-active-bg-factor& $table-hover-bg-factor) χρησιμοποιούνται για τον προσδιορισμό της αντίθεσης σε παραλλαγές πίνακα.
Εκτός από τις ανοιχτόχρωμες και σκούρες παραλλαγές του τραπεζιού, τα χρώματα του θέματος φωτίζονται από τη $table-bg-scaleμεταβλητή.