Source

Πίνακες

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

Παραδείγματα

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

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

# Πρώτα τελευταίος Λαβή
1 Σημάδι Οθων @mdo
2 Ιάκωβος Θόρντον @Λίπος
3 Λάρι το πουλί @κελάδημα 
<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>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Μπορείτε επίσης να αντιστρέψετε τα χρώματα—με ανοιχτό κείμενο σε σκούρο φόντο—με .table-dark.

# Πρώτα τελευταίος Λαβή
1 Σημάδι Οθων @mdo
2 Ιάκωβος Θόρντον @Λίπος
3 Λάρι το πουλί @κελάδημα 
<table class="table table-dark">
  <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>

Επιλογές κεφαλής τραπεζιού

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

# Πρώτα τελευταίος Λαβή
1 Σημάδι Οθων @mdo
2 Ιάκωβος Θόρντον @Λίπος
3 Λάρι το πουλί @κελάδημα
# Πρώτα τελευταίος Λαβή
1 Σημάδι Οθων @mdo
2 Ιάκωβος Θόρντον @Λίπος
3 Λάρι το πουλί @κελάδημα 
<table class="table">
  <thead class="thead-dark">
    <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 class="table">
  <thead class="thead-light">
    <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-stripedτο για να προσθέσετε λωρίδες ζέβρας σε οποιαδήποτε σειρά πίνακα εντός του <tbody>.

# Πρώτα τελευταίος Λαβή
1 Σημάδι Οθων @mdo
2 Ιάκωβος Θόρντον @Λίπος
3 Λάρι το πουλί @κελάδημα 
<table class="table 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>
    <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>
# Πρώτα τελευταίος Λαβή
1 Σημάδι Οθων @mdo
2 Ιάκωβος Θόρντον @Λίπος
3 Λάρι το πουλί @κελάδημα 
<table class="table table-striped table-dark">
  <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-borderedγια περιγράμματα σε όλες τις πλευρές του πίνακα και των κελιών.

# Πρώτα τελευταίος Λαβή
1 Σημάδι Οθων @mdo
2 Ιάκωβος Θόρντον @Λίπος
3 Larry the Bird @κελάδημα 
<table class="table table-bordered">
  <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>
# Πρώτα τελευταίος Λαβή
1 Σημάδι Οθων @mdo
2 Ιάκωβος Θόρντον @Λίπος
3 Larry the Bird @κελάδημα 
<table class="table table-bordered table-dark">
  <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>

Τραπέζι χωρίς περιθώρια

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

# Πρώτα τελευταίος Λαβή
1 Σημάδι Οθων @mdo
2 Ιάκωβος Θόρντον @Λίπος
3 Larry the Bird @κελάδημα 
<table class="table table-borderless">
  <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>

.table-borderlessμπορεί επίσης να χρησιμοποιηθεί σε σκούρα τραπέζια.

# Πρώτα τελευταίος Λαβή
1 Σημάδι Οθων @mdo
2 Ιάκωβος Θόρντον @Λίπος
3 Larry the Bird @κελάδημα 
<table class="table table-borderless table-dark">
  <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>

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

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

# Πρώτα τελευταίος Λαβή
1 Σημάδι Οθων @mdo
2 Ιάκωβος Θόρντον @Λίπος
3 Larry the Bird @κελάδημα 
<table class="table table-hover">
  <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>
# Πρώτα τελευταίος Λαβή
1 Σημάδι Οθων @mdo
2 Ιάκωβος Θόρντον @Λίπος
3 Larry the Bird @κελάδημα 
<table class="table table-hover table-dark">
  <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>

Μικρό τραπέζι

Προσθέστε .table-smτο για να κάνετε τα τραπέζια πιο συμπαγή, κόβοντας τα κελιά στη μέση.

# Πρώτα τελευταίος Λαβή
1 Σημάδι Οθων @mdo
2 Ιάκωβος Θόρντον @Λίπος
3 Larry the Bird @κελάδημα 
<table class="table table-sm">
  <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>
# Πρώτα τελευταίος Λαβή
1 Σημάδι Οθων @mdo
2 Ιάκωβος Θόρντον @Λίπος
3 Larry the Bird @κελάδημα 
<table class="table table-sm table-dark">
  <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 rows -->
<tr class="table-active">...</tr>

<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-active">...</td>

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

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

# Επικεφαλίδα Επικεφαλίδα
1 Κύτταρο Κύτταρο
2 Κύτταρο Κύτταρο
3 Κύτταρο Κύτταρο
4 Κύτταρο Κύτταρο
5 Κύτταρο Κύτταρο
6 Κύτταρο Κύτταρο
7 Κύτταρο Κύτταρο
8 Κύτταρο Κύτταρο
9 Κύτταρο Κύτταρο 
<!-- On rows -->
<tr class="bg-primary">...</tr>
<tr class="bg-success">...</tr>
<tr class="bg-warning">...</tr>
<tr class="bg-danger">...</tr>
<tr class="bg-info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="bg-primary">...</td>
  <td class="bg-success">...</td>
  <td class="bg-warning">...</td>
  <td class="bg-danger">...</td>
  <td class="bg-info">...</td>
</tr>
Μετάδοση νοήματος στις υποστηρικτικές τεχνολογίες

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

Δημιουργήστε πίνακες που ανταποκρίνονται τυλίγοντας οποιονδήποτε .tableμε .table-responsive{-sm|-md|-lg|-xl}, κάνοντας τον πίνακα να μετακινείται οριζόντια σε κάθε max-widthσημείο διακοπής έως (αλλά χωρίς να περιλαμβάνει) 576 εικονοστοιχεία, 768 εικονοστοιχεία, 992 εικονοστοιχεία και 1120 εικονοστοιχεία, αντίστοιχα.

Λάβετε υπόψη ότι δεδομένου ότι τα προγράμματα περιήγησης δεν υποστηρίζουν προς το παρόν ερωτήματα περιβάλλοντος εύρους , εργαζόμαστε γύρω από τους περιορισμούς min-και τα max-προθέματα και τις θύρες προβολής με κλασματικά πλάτη (που μπορεί να προκύψουν υπό ορισμένες συνθήκες σε συσκευές υψηλής ανάλυσης dpi, για παράδειγμα) χρησιμοποιώντας τιμές με μεγαλύτερη ακρίβεια για αυτές τις συγκρίσεις .

Λεζάντες

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

Λίστα χρηστών
# Πρώτα τελευταίος Λαβή
1 Σημάδι Οθων @mdo
2 Ιάκωβος Θόρντον @Λίπος
3 Λάρι το πουλί @κελάδημα 
<table class="table">
  <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}.

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

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

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

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

# Επικεφαλίδα Επικεφαλίδα Επικεφαλίδα Επικεφαλίδα Επικεφαλίδα Επικεφαλίδα Επικεφαλίδα Επικεφαλίδα Επικεφαλίδα
1 Κύτταρο Κύτταρο Κύτταρο Κύτταρο Κύτταρο Κύτταρο Κύτταρο Κύτταρο Κύτταρο
2 Κύτταρο Κύτταρο Κύτταρο Κύτταρο Κύτταρο Κύτταρο Κύτταρο Κύτταρο Κύτταρο
3 Κύτταρο Κύτταρο Κύτταρο Κύτταρο Κύτταρο Κύτταρο Κύτταρο Κύτταρο Κύτταρο 
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

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

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

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

# Επικεφαλίδα Επικεφαλίδα Επικεφαλίδα Επικεφαλίδα Επικεφαλίδα Επικεφαλίδα Επικεφαλίδα Επικεφαλίδα
1 Κύτταρο Κύτταρο Κύτταρο Κύτταρο Κύτταρο Κύτταρο Κύτταρο Κύτταρο
2 Κύτταρο Κύτταρο Κύτταρο Κύτταρο Κύτταρο Κύτταρο Κύτταρο Κύτταρο
3 Κύτταρο Κύτταρο Κύτταρο Κύτταρο Κύτταρο Κύτταρο Κύτταρο Κύτταρο 
<div class="table-responsive-sm">
  <table class="table">
    ...
  </table>
</div>
# Επικεφαλίδα Επικεφαλίδα Επικεφαλίδα Επικεφαλίδα Επικεφαλίδα Επικεφαλίδα Επικεφαλίδα Επικεφαλίδα
1 Κύτταρο Κύτταρο Κύτταρο Κύτταρο Κύτταρο Κύτταρο Κύτταρο Κύτταρο
2 Κύτταρο Κύτταρο Κύτταρο Κύτταρο Κύτταρο Κύτταρο Κύτταρο Κύτταρο
3 Κύτταρο Κύτταρο Κύτταρο Κύτταρο Κύτταρο Κύτταρο Κύτταρο Κύτταρο 
<div class="table-responsive-md">
  <table class="table">
    ...
  </table>
</div>
# Επικεφαλίδα Επικεφαλίδα Επικεφαλίδα Επικεφαλίδα Επικεφαλίδα Επικεφαλίδα Επικεφαλίδα Επικεφαλίδα
1 Κύτταρο Κύτταρο Κύτταρο Κύτταρο Κύτταρο Κύτταρο Κύτταρο Κύτταρο
2 Κύτταρο Κύτταρο Κύτταρο Κύτταρο Κύτταρο Κύτταρο Κύτταρο Κύτταρο
3 Κύτταρο Κύτταρο Κύτταρο Κύτταρο Κύτταρο Κύτταρο Κύτταρο Κύτταρο 
<div class="table-responsive-lg">
  <table class="table">
    ...
  </table>
</div>
# Επικεφαλίδα Επικεφαλίδα Επικεφαλίδα Επικεφαλίδα Επικεφαλίδα Επικεφαλίδα Επικεφαλίδα Επικεφαλίδα
1 Κύτταρο Κύτταρο Κύτταρο Κύτταρο Κύτταρο Κύτταρο Κύτταρο Κύτταρο
2 Κύτταρο Κύτταρο Κύτταρο Κύτταρο Κύτταρο Κύτταρο Κύτταρο Κύτταρο
3 Κύτταρο Κύτταρο Κύτταρο Κύτταρο Κύτταρο Κύτταρο Κύτταρο Κύτταρο 
<div class="table-responsive-xl">
  <table class="table">
    ...
  </table>
</div>