CSS Bootstrap 2. rész

1. oldal / 10

CSS Bootstrap 2. rész


29.1. fejezet: Bootstrap táblázatok (Tables)

A Bootstrap táblázat alapvetően egy megfelelő helyhagyással és vízszintes elválasztó vonalakkal rendelkezik.
Az egyszerű .table osztály így név ki: (cssbootstrap12.html)

Bootstrap táblázat

A használata is igen egyszerű:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap egyszerű táblázat</title>
  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Egyszerű táblázat</h2>
  <table class="table">
    <thead>
      <tr>
        <th>Vezetéknév</th>
        <th>Keresztnév</th>
        <th>E-mail</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Antal</td>
        <td>Béla</td>
        <td>Ez az e-mail-cím a szpemrobotok elleni védelem alatt áll. Megtekintéséhez engedélyeznie kell a JavaScript használatát.</td>
      </tr>
      <tr>
        <td>Cirmos</td>
        <td>Cica</td>
        <td>Ez az e-mail-cím a szpemrobotok elleni védelem alatt áll. Megtekintéséhez engedélyeznie kell a JavaScript használatát.</td>
      </tr>
      <tr>
        <td>Daliás</td>
        <td>Diána</td>
        <td>Ez az e-mail-cím a szpemrobotok elleni védelem alatt áll. Megtekintéséhez engedélyeznie kell a JavaScript használatát.</td>
      </tr>
    </tbody>
  </table>

</div>

</body>
</html>

A másik gyakran használt a váltott soros csíkozás. Itt a lényeget, a .table-striped paraméterre kell lecserélni ilyen formában:

  <table class="table-striped">

Ennek hatása:

Bootstrap csíkos táblázat

A következő verzió a keretes táblázat, amely táblázat minden egyes cellájának minden oldalához ad keretet. Az osztály neve: .table-bordered.
A lebegő sorok (.table-hover) egy érdekes effektus, amely a sima táblázat adott sorát szürke hátterűvé váltja át, amikor az egér a sor fölé ér.
A sima táblázatot lehet kérni fekete háttérrel és fehér betűkkel is a .table-dark osztállyal.
A fekete hátteret és a csíkozást lehet kombinálni is a következő paraméterrel:
<table class="table table-dark table-striped">
Továbbá a fekete hátteret lehet kombinálni a lebegő csíkozással is, például:
<table class="table table-dark table-hover">
Ritkán alkalmazott verzió a keret nélküli táblázat:
<table class="table table-borderless">

További lehetőségek találhatók az alábbi címen:
https://www.w3schools.com/bootstrap4/bootstrap_tables.asp