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>

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

Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by wrapping a .table with .table-responsive. Or, pick a maximum breakpoint with which to have a responsive table up to by using .table-responsive{-sm|-md|-lg|-xl}.

Vertical clipping/truncation

Responsive tables make use of overflow-y: hidden, which clips off any content that goes beyond the bottom or top edges of the table. In particular, this can clip off dropdown menus and other third-party widgets.

Always responsive

Across every breakpoint, use .table-responsive for horizontally scrolling tables.

# Heading Heading Heading Heading Heading Heading Heading Heading Heading
1 Cell Cell Cell Cell Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell Cell Cell Cell Κύτταρο 
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Breakpoint specific

Χρήση.table-responsive{-sm|-md|-lg|-xl} as needed to create responsive tables up to a particular breakpoint. From that breakpoint and up, the table will behave normally and not scroll horizontally.

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

# Επικεφαλίδα Επικεφαλίδα Επικεφαλίδα Επικεφαλίδα Επικεφαλίδα Επικεφαλίδα Επικεφαλίδα Επικεφαλίδα
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>