Menu
  1. Home 1
  2. Home 2
  3. Home 3
  4. Home 4
  5. Home 5
  6. Home 6
  7. World

    World news

    • All
    • Health
    • Tech
    • Travel
    • World
    More
      Previous Next

      No content

      A problem occurred while loading content.

    1. Life Style

      Life Style

      • All
      • Arts
      • Health
      • Music
      • Travel
      More
        Previous Next

        No content

        A problem occurred while loading content.

      1. Fashion

        Fashion

        • All
        • Fashion
        More
          Previous Next

          No content

          A problem occurred while loading content.

        1. Sport
          Previous Next

          No content

          A problem occurred while loading content.

        2. Events/Calendar
        3. Features
        Social Links Search User Login Menu
        Tools
        Close
        Close

        Tables

        Documentation and examples for opt-in styling of tables (given their prevelant use in JavaScript plugins) with Bootstrap.

        Examples

        Due to the widespread use of tables across third-party widgets like calendars and date pickers, we’ve designed our tables to be opt-in. Just add the base class .table to any <table>, then extend with custom styles or our various included modifier classes.

        Using the most basic table markup, here’s how .table-based tables look in Bootstrap. All table styles are inherited in Bootstrap 4, meaning any nested tables will be styled in the same manner as the parent.

        # First Name Last Name Username
        1 Mark Otto @mdo
        2 Jacob Thornton @fat
        3 Larry the Bird @twitter
        <table class="table">
        	<thead>
        		<tr>
        			<th scope="col">#</th>
        			<th scope="col">First Name</th>
        			<th scope="col">Last Name</th>
        			<th scope="col">Username</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>

        You can also invert the colors—with light text on dark backgrounds—with .table-dark.

        # First Name Last Name Username
        1 Mark Otto @mdo
        2 Jacob Thornton @fat
        3 Larry the Bird @twitter
        <table class="table table-dark">
        	<thead>
        		<tr>
        			<th scope="col">#</th>
        			<th scope="col">First Name</th>
        			<th scope="col">Last Name</th>
        			<th scope="col">Username</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 head options

        Similar to tables and dark tables, use the modifier classes .thead-light or .thead-dark to make <thead>s appear light or dark gray.

        # First Name Last Name Username
        1 Mark Otto @mdo
        2 Jacob Thornton @fat
        3 Larry the Bird @twitter
        # First Name Last Name Username
        1 Mark Otto @mdo
        2 Jacob Thornton @fat
        3 Larry the Bird @twitter
        <table class="table">
        	<thead class="thead-dark">
        		<tr>
        			<th scope="col">#</th>
        			<th scope="col">First Name</th>
        			<th scope="col">Last Name</th>
        			<th scope="col">Username</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 Name</th>
        			<th scope="col">Last Name</th>
        			<th scope="col">Username</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>

        Striped rows

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

        # First Name Last Name Username
        1 Mark Otto @mdo
        2 Jacob Thornton @fat
        3 Larry the Bird @twitter
        <table class="table table-striped">
        	<thead>
        		<tr>
        			<th scope="col">#</th>
        			<th scope="col">First Name</th>
        			<th scope="col">Last Name</th>
        			<th scope="col">Username</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>
        # First Name Last Name Username
        1 Mark Otto @mdo
        2 Jacob Thornton @fat
        3 Larry the Bird @twitter
        <table class="table table-striped table-dark">
        	<thead>
        		<tr>
        			<th scope="col">#</th>
        			<th scope="col">First Name</th>
        			<th scope="col">Last Name</th>
        			<th scope="col">Username</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>

        Bordered table

        Add .table-bordered for borders on all sides of the table and cells.

        # First Name Last Name Username
        1 Mark Otto @mdo
        2 Mark Otto @TwBootstrap
        3 Jacob Thornton @fat
        4 Larry the Bird @twitter
        <table class="table table-bordered">
        	<thead>
        		<tr>
        			<th scope="col">#</th>
        			<th scope="col">First Name</th>
        			<th scope="col">Last Name</th>
        			<th scope="col">Username</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>Mark</td>
        			<td>Otto</td>
        			<td>@TwBootstrap</td>
        		</tr>
        		<tr>
        			<th scope="row">3</th>
        			<td>Jacob</td>
        			<td>Thornton</td>
        			<td>@fat</td>
        		</tr>
        		<tr>
        			<th scope="row">4</th>
        			<td colspan="2">Larry the Bird</td>
        			<td>@twitter</td>
        		</tr>
        	</tbody>
        </table>
        # First Name Last Name Username
        1 Mark Otto @mdo
        2 Mark Otto @TwBootstrap
        3 Jacob Thornton @fat
        4 Larry the Bird @twitter
        <table class="table table-bordered table-dark">
        	<thead>
        		<tr>
        			<th scope="col">#</th>
        			<th scope="col">First Name</th>
        			<th scope="col">Last Name</th>
        			<th scope="col">Username</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>Mark</td>
        			<td>Otto</td>
        			<td>@TwBootstrap</td>
        		</tr>
        		<tr>
        			<th scope="row">3</th>
        			<td>Jacob</td>
        			<td>Thornton</td>
        			<td>@fat</td>
        		</tr>
        		<tr>
        			<th scope="row">4</th>
        			<td colspan="2">Larry the Bird</td>
        			<td>@twitter</td>
        		</tr>
        	</tbody>
        </table>

        Hoverable rows

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

        # First Name Last Name Username
        1 Mark Otto @mdo
        2 Jacob Thornton @fat
        3 Larry the Bird @twitter
        <table class="table table-hover">
        	<thead>
        		<tr>
        			<th scope="col">#</th>
        			<th scope="col">First Name</th>
        			<th scope="col">Last Name</th>
        			<th scope="col">Username</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>
        # First Name Last Name Username
        1 Mark Otto @mdo
        2 Jacob Thornton @fat
        3 Larry the Bird @twitter
        <table class="table table-hover table-dark">
        	<thead>
        		<tr>
        			<th scope="col">#</th>
        			<th scope="col">First Name</th>
        			<th scope="col">Last Name</th>
        			<th scope="col">Username</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>

        Small table

        Add .table-sm to make tables more compact by cutting cell padding in half.

        # First Name Last Name Username
        1 Mark Otto @mdo
        2 Jacob Thornton @fat
        3 Larry the Bird @twitter
        <table class="table table-sm">
        	<thead>
        		<tr>
        			<th scope="col">#</th>
        			<th scope="col">First Name</th>
        			<th scope="col">Last Name</th>
        			<th scope="col">Username</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>
        # First Name Last Name Username
        1 Mark Otto @mdo
        2 Jacob Thornton @fat
        3 Larry the Bird @twitter
        <table class="table table-sm table-dark">
        	<thead>
        		<tr>
        			<th scope="col">#</th>
        			<th scope="col">First Name</th>
        			<th scope="col">Last Name</th>
        			<th scope="col">Username</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>

        Contextual classes

        Use contextual classes to color table rows or individual cells.

        Type Column heading Column heading Column heading
        Active Column content Column content Column content
        Default Column content Column content Column content
        Primary Column content Column content Column content
        Secondary Column content Column content Column content
        Success Column content Column content Column content
        Danger Column content Column content Column content
        Warning Column content Column content Column content
        Info Column content Column content Column content
        Light Column content Column content Column content
        Dark Column content Column content Column content
        <!-- 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>

        Regular table background variants are not available with the dark table, however, you may use text or background utilities to achieve similar styles.

        # Column heading Column heading Column heading
        1 Column content Column content Column content
        2 Column content Column content Column content
        3 Column content Column content Column content
        4 Column content Column content Column content
        5 Column content Column content Column content
        6 Column content Column content Column content
        7 Column content Column content Column content
        8 Column content Column content Column content
        9 Column content Column content Column content
        <!-- 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>

        Conveying meaning to assistive technologies

        Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .sr-only class.

        Captions

        A <caption> functions like a heading for a table. It helps users with screen readers to find a table and understand what it’s about and decide if they want to read it.

        List of users
        # First Name Last Name Username
        1 Mark Otto @mdo
        2 Jacob Thornton @fat
        3 Larry the Bird @twitter
        <table class="table">
        	<caption>List of users</caption>
        	<thead>
        		<tr>
        			<th scope="col">#</th>
        			<th scope="col">First Name</th>
        			<th scope="col">Last Name</th>
        			<th scope="col">Username</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

        Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by adding .table-responsive class on .table. Or, pick a maximum breakpoint with which to have a responsive table up to by adding .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

        # Table heading Table heading Table heading Table heading Table heading Table heading Table heading Table heading Table heading
        1 Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell
        2 Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell
        3 Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell
        # Table heading Table heading Table heading Table heading Table heading Table heading
        1 Table cell Table cell Table cell Table cell Table cell Table cell
        2 Table cell Table cell Table cell Table cell Table cell Table cell
        3 Table cell Table cell Table cell Table cell Table cell Table cell
        <table class="table table-responsive">
        	...
        </table>

        Breakpoint specific

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

        # Table heading Table heading Table heading Table heading Table heading
        1 Table cell Table cell Table cell Table cell Table cell
        2 Table cell Table cell Table cell Table cell Table cell
        3 Table cell Table cell Table cell Table cell Table cell
        # Table heading Table heading Table heading Table heading Table heading
        1 Table cell Table cell Table cell Table cell Table cell
        2 Table cell Table cell Table cell Table cell Table cell
        3 Table cell Table cell Table cell Table cell Table cell
        # Table heading Table heading Table heading Table heading Table heading
        1 Table cell Table cell Table cell Table cell Table cell
        2 Table cell Table cell Table cell Table cell Table cell
        3 Table cell Table cell Table cell Table cell Table cell
        # Table heading Table heading Table heading Table heading Table heading
        1 Table cell Table cell Table cell Table cell Table cell
        2 Table cell Table cell Table cell Table cell Table cell
        3 Table cell Table cell Table cell Table cell Table cell
        <table class="table table-responsive-sm">
        	...
        </table>
        
        <table class="table table-responsive-md">
        	...
        </table>
        
        <table class="table table-responsive-lg">
        	...
        </table>
        
        <table class="table table-responsive-xl">
        	...
        </table>
        Back To Top