Tuesday, 2 April 2024

Bootstrap Tables

 

BOOTSTRAP TABLES

The basic table structure in Bootstrap takes advantage of almost all the available HTML table tags. Add the base class .table to any <table

            <table class="table">

All table styles are not inherited in Bootstrap, meaning any nested tables can be styled independently from the parent.

TABLE CLASS VARIANTS

Use contextual classes to colour tables, table rows or individual cells.

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

 

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

 

Table Classes

Class-Name

Description

Example

table-striped

to add zebra-striping to any table row within the <tbody>

<table class="table table-striped">

 

table-striped-columns 

to add zebra-striping to any table column.

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

 

.table-hover 

to enable a hover state on table rows within a <tbody>.

<table class="table table-hover">

 

table-active

To highlight a table row or cell by adding this class.

<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    <tr class="table-active">

table-bordered 

To add borders on all sides of the table and cells.

<table class="table table-bordered">

 

table-borderless 

To prepare a table without borders.

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

 

table-sm 

to make any table more compact by cutting all cell padding in half.

<table class="table table-sm">

 

table-hover

adds a hover effect (grey background color) on table rows:

<table class="table table-hover">

table-dark

adds a black background to the table

<table class="table table-dark">

table-dark and .table-striped

to create a dark, striped table

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

table-responsive

adds a scrollbar to the table when needed

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

 

RESPONSIVE TABLES

Possible to decide when the table should get a scrollbar, depending on the screen width:

Class

Screen width

.table-responsive-sm

< 576px

.table-responsive-md

< 768px

.table-responsive-lg

< 992px

.table-responsive-xl

< 1200px

.table-responsive-xxl

< 1400px

 

SAMPLE SCRIPT

<link rel="stylesheet" href="CSS/bootstrap.min.css" />

<script src="JS/bootstrap.min.js"></script>

<script src="JS/bootstrap.bundle.min.js"></script>

<!doctype html>

<html>

    <head>

        <title>Navigation Bootstrap</title>

        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

       

  </head>

    </head>

    <body>

        <table class="table table-hover table-danger table-bordered border-primary">

        <thead>

            <tr class="table-secondary">

                <th>#</th>

                <th>First</th>

                <th>Last</th>

                <th>Handle</th>

            </tr>

        </thead>

        <tbody>

            <tr>

                <th>1</th>

                <td>Mark</td>

                <td>Otto</td>

                <td>@mdo</td>

            </tr>

            <tr>

                <th>2</th>

                <td>Jacob</td>

                <td>Thornton</td>

                <td>@fat</td>

            </tr>

        <tr>

        <th>3</th>

        <td colspan="2">Larry the Bird</td>

        <td>@twitter</td>

      </tr>

    </tbody>

  </table>

</body>

</html>

No comments:

Post a Comment