content logo

Bootstrap Tables:

Editable Bootstrap Table

Tables are one of the most commonly used tools in a website. They help you organize all the data you have in stylish cells in columns and rows. This makes sure everything in your page is organized nicely and avoid cluttering the pages. Tables are not as flexible as some other features in terms of functionality but they have tons of customization options and you can basically create awesome new looks easily. a nice stylish table helps improve the look of your website which increases your traffic and revenue in the long run. By stylish tables, we don’t mean inserting data into simple grids of cells, write a heading for it and apply some cool formatting. We mean a beautiful CSS Bootstrap table that can be formatted or updated with ease.

The code below is designed to add in an editable table with just that in mind. Every cell in this table can be edited by a simple click. With our Bootstrap table with edit feature, you won’t have any problems with editing work tables as you can change everything easily the same way you do with an Excel spreadsheet. It does not feel hard, complicated, and tedious and on the plus side, it has a nice dark theme to it. our Bootstrap dark table can be the right tool for your website so check the code below to add it to your website.

#

Editable Table

#

Bootstrap Dark Table

#

Bootstrap Table with Edit

#

CSS Bootstrap Table

<!-- This script got from frontendfreecode.com -->
<table class="table table-striped table-bordered">
    <thead class="thead-inverse">
        <tr>
            <td>Student Name<i class="fa fa-search pull-right" aria-hidden="true"></i></td>
            <td>Level<span class="pull-right"><i class="fa fa-long-arrow-down " aria-hidden="true"></i><i class="fa fa-long-arrow-up" aria-hidden="true"></i></span></td>
            <td>Class<span class="pull-right"><i class="fa fa-long-arrow-down" aria-hidden="true"></i><i class="fa fa-long-arrow-up" aria-hidden="true"></i></span></td>
            <td>School Number<span class="pull-right"><i class="fa fa-long-arrow-down" aria-hidden="true"></i><i class="fa fa-long-arrow-up" aria-hidden="true"></i><i class="fa fa-search pull-right" aria-hidden="true"></i></span></td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td contenteditable="true">Madison Megan</td>
            <td contenteditable="true">5</td>
            <td contenteditable="true">A</td>
            <td contenteditable="true">1001</td>
        </tr>
        <tr>
            <td contenteditable="true">James Hailey</td>
            <td contenteditable="true">1</td>
            <td contenteditable="true">E</td>
            <td contenteditable="true">1002</td>
        </tr>
        <tr>
            <td contenteditable="true">Jennifer Emily</td>
            <td contenteditable="true">7</td>
            <td contenteditable="true">F</td>
            <td contenteditable="true">1003</td>
        </tr>
        <tr>
            <td contenteditable="true">Lisa Henry</td>
            <td contenteditable="true">5</td>
            <td contenteditable="true">B</td>
            <td contenteditable="true">1004</td>
        </tr>
        <tr>
            <td contenteditable="true">Emily Jane</td>
            <td contenteditable="true">7</td>
            <td contenteditable="true">F</td>
            <td contenteditable="true">1005</td>
        </tr>
        <tr>
            <td contenteditable="true">Jennifer Altair</td>
            <td contenteditable="true">7</td>
            <td contenteditable="true">E</td>
            <td contenteditable="true">1006</td>
        </tr>
        <tr>
            <td contenteditable="true">Lisa Alexander</td>
            <td contenteditable="true">4</td>
            <td contenteditable="true">D</td>
            <td contenteditable="true">1007</td>
        </tr>
        <tr>
            <td contenteditable="true">Hailey Emma</td>
            <td contenteditable="true">3</td>
            <td contenteditable="true">B</td>
            <td contenteditable="true">1008</td>
        </tr>
        <tr>
            <td contenteditable="true">Alexander Alyssa</td>
            <td contenteditable="true">6</td>
            <td contenteditable="true">B</td>
            <td contenteditable="true">1009</td>
        </tr>
    </tbody>
</table><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>
                                                                            
.table, tr,td{
	border:1px solid black !important;
}

thead td{
	border:2px solid black !important;
} 
thead tr{
	color:#d9534f;
	font-weight:bold;
}
.table-striped > tbody > tr:nth-child(odd) > td, .table-striped > tbody > tr:nth-child(odd) > th,.table-striped > thead {
   background-color: #2D3237;
	color:gray;
	font-weight:bold;
}
.table-striped > tbody > tr:nth-child(even) > td, .table-striped > tbody > tr:nth-child(even) > th {
   background-color: #34393F;
	color:gray;
	font-weight:bold;
}
.table td:focus{
	background-color:white;
	color:red;
}
[contenteditable="true"]:focus{
background-color: white!important;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<style>
.table, tr,td{
	border:1px solid black !important;
}

thead td{
	border:2px solid black !important;
} 
thead tr{
	color:#d9534f;
	font-weight:bold;
}
.table-striped > tbody > tr:nth-child(odd) > td, .table-striped > tbody > tr:nth-child(odd) > th,.table-striped > thead {
   background-color: #2D3237;
	color:gray;
	font-weight:bold;
}
.table-striped > tbody > tr:nth-child(even) > td, .table-striped > tbody > tr:nth-child(even) > th {
   background-color: #34393F;
	color:gray;
	font-weight:bold;
}
.table td:focus{
	background-color:white;
	color:red;
}
[contenteditable="true"]:focus{
background-color: white!important;
}
</style>

</head>
<body>
<table class="table table-striped table-bordered">
    <thead class="thead-inverse">
        <tr>
            <td>Student Name<i class="fa fa-search pull-right" aria-hidden="true"></i></td>
            <td>Level<span class="pull-right"><i class="fa fa-long-arrow-down " aria-hidden="true"></i><i class="fa fa-long-arrow-up" aria-hidden="true"></i></span></td>
            <td>Class<span class="pull-right"><i class="fa fa-long-arrow-down" aria-hidden="true"></i><i class="fa fa-long-arrow-up" aria-hidden="true"></i></span></td>
            <td>School Number<span class="pull-right"><i class="fa fa-long-arrow-down" aria-hidden="true"></i><i class="fa fa-long-arrow-up" aria-hidden="true"></i><i class="fa fa-search pull-right" aria-hidden="true"></i></span></td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td contenteditable="true">Madison Megan</td>
            <td contenteditable="true">5</td>
            <td contenteditable="true">A</td>
            <td contenteditable="true">1001</td>
        </tr>
        <tr>
            <td contenteditable="true">James Hailey</td>
            <td contenteditable="true">1</td>
            <td contenteditable="true">E</td>
            <td contenteditable="true">1002</td>
        </tr>
        <tr>
            <td contenteditable="true">Jennifer Emily</td>
            <td contenteditable="true">7</td>
            <td contenteditable="true">F</td>
            <td contenteditable="true">1003</td>
        </tr>
        <tr>
            <td contenteditable="true">Lisa Henry</td>
            <td contenteditable="true">5</td>
            <td contenteditable="true">B</td>
            <td contenteditable="true">1004</td>
        </tr>
        <tr>
            <td contenteditable="true">Emily Jane</td>
            <td contenteditable="true">7</td>
            <td contenteditable="true">F</td>
            <td contenteditable="true">1005</td>
        </tr>
        <tr>
            <td contenteditable="true">Jennifer Altair</td>
            <td contenteditable="true">7</td>
            <td contenteditable="true">E</td>
            <td contenteditable="true">1006</td>
        </tr>
        <tr>
            <td contenteditable="true">Lisa Alexander</td>
            <td contenteditable="true">4</td>
            <td contenteditable="true">D</td>
            <td contenteditable="true">1007</td>
        </tr>
        <tr>
            <td contenteditable="true">Hailey Emma</td>
            <td contenteditable="true">3</td>
            <td contenteditable="true">B</td>
            <td contenteditable="true">1008</td>
        </tr>
        <tr>
            <td contenteditable="true">Alexander Alyssa</td>
            <td contenteditable="true">6</td>
            <td contenteditable="true">B</td>
            <td contenteditable="true">1009</td>
        </tr>
    </tbody>
</table><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>

</body>
</html>
Preview