content logo

Learn CSS:

17 Bootstrap Table Codes

Source
frontendfreecode.com
Dependencies
bootstrap / font-awesome / slim
Made With
HTML / CSS / JS
Responsive
Yes
Description

This table is not full width but it is responsive. Clicking on the button at the bottom of the table will add a row to the table.

 

Source
frontendfreecode.com
Dependencies
bootstrap / all / popper
Made With
HTML / CSS / JS
Responsive
Yes
Description

The table displayed in this post can download the contents of the table in different formats. In addition, this table can be customized by increasing or decreasing the columns it shows.

 

Source
frontendfreecode.com
Dependencies
bootstrap / jquery /font-awesome
Made With
HTML / CSS / JS
Responsive
Yes
Description

This code indicates the cards that can be used for the products that want to be sold in the store. Next to these cards is a table that displays items that have already been added to the cart.

 

Source
frontendfreecode.com
Dependencies
bootstrap
Made With
HTML / CSS
Responsive
Yes
Description

We have two tables in this code. In the first table, by placing the mouse on each of the columns, the column is painted gray, and in the second, the entire row is painted gray.

 

Source
frontendfreecode.com
Dependencies
bootstrap / popper
Made With
HTML / CSS / JS
Responsive
Yes
Description

Clicking on any item in the table opens another table below it. This serious table has only three lines.

 

Source
frontendfreecode.com
Dependencies
bootstrap / jquery
Made With
HTML / CSS
Responsive
Yes
Description

The pricing tables we have in this code each have a different color. There is a wavy shape between the table header and the table items, which moves slightly in hover mode.

 

Source
frontendfreecode.com
Dependencies
bootstrap / jquery / all
Made With
HTML / CSS
Responsive
Yes
Description

You can use this table to manage projects in a team. This table has a delete and edit icon and each row of the table contains a small profile picture.

 

Source
frontendfreecode.com
Dependencies
bootstrap / jquery
Made With
HTML / CSS / JS
Responsive
Yes
Description

The table in this post has several sections. Each section of this table opens and closes with an accordion. The whole table is simple. It has a gray border.

 

Source
frontendfreecode.com
Dependencies
bootstrap /jquery / all
Made With
HTML / CSS / JS
Responsive
Yes
Description

This gradient table is purple, and by placing the mouse cursor on each item, the entire column and row containing that cell light up slightly.

 

Source
frontendfreecode.com
Dependencies
bootstrap /jquery /normalize
Made With
HTML / CSS / JS
Responsive
Yes
Description

By placing the mouse on each row, the row turns orange. By selecting any of the buttons at the top of the table, the table is arranged with the animation.

 

Source
frontendfreecode.com
Dependencies
bootstrap /jquery /font-awesome
Made With
HTML / CSS / JS
Responsive
Yes
Description

This table has a dark theme. The color of the headers is red and the table items can be edited.

 

Source
frontendfreecode.com
Dependencies
bootstrap /jquery /font-awesome
Made With
HTML / CSS
Responsive
Yes
Description

This table has colorful rows. The colors of the rows can be different. All entries in this table are black. The table itself is white.

 

Source
frontendfreecode.com
Dependencies
bootstrap /jquery
Made With
HTML / CSS / JS
Responsive
Yes
Description

The header of this table is not fixed at first, but by scrolling the header table at the top of the page is fixed.

 

Source
frontendfreecode.com
Dependencies
bootstrap /jquery / tableExport
Made With
HTML / CSS / JS
Responsive
Yes
Description

This table has a gray and thin border. By placing the mouse on each row, that row turns gray and has the ability to output from the table in different formats.

 

Source
frontendfreecode.com
Dependencies
bootstrap /flickit
Made With
HTML / CSS 
Responsive
Yes
Description

There are many tables in this code. The next tables are displayed by clicking on the two buttons at the bottom of the page. The tables are actually inside a slider.

 

Source
frontendfreecode.com
Dependencies
bootstrap /jquery
Made With
HTML / CSS 
Responsive
Yes
Description

This table has rows that allow you to edit the cells in each row. Tables also have the ability to add or delete one or more rows.

 

Source
frontendfreecode.com
Dependencies
bootstrap /jquery
Made With
HTML / CSS 
Responsive
Yes
Description

We have three tabs in this code. These tabs each contain a table. The title and line below the selected tabs are displayed a little more color.

#

Simple Bootstrap Tables

#

Free Table Codes

#

Animating Bootstrap Tables

#

Responsive Table Codes