Table Style 3
The following is a customization to add table style 3 to any table you wish in your app.
Step 1
Add the following code to the header section of your app.
<style>
/* Table Head CSS */
.table-style-3 .table-wrap>.table {
border: 1px solid #ddd;
}
.table-style-3 table>thead>tr>th {
border: none;
font-family: Montserrat-Medium;
font-size: 12px;
color: #fff;
line-height: 1.4;
text-transform: uppercase;
background-color: #333333;
padding-top: 20px;
padding-bottom: 20px;
}
.table-style-3 table>thead>tr>th:hover {
color: #fff;
background-color: #484848 !important;
}
.table-style-3 .table-actions {
background-color: #eaf8e6;
border-top-left-radius: 2rem;
border-top-right-radius: 2rem;
}
.table-style-3 .table-actions .pull-left,
.table-style-3 .table-actions .pull-right {
padding: 1rem;
}
.table-style-3 table,
.table-style-3 table>thead>tr>th,
.table-style-3 table>tbody>tr>th,
.table-style-3 table>tfoot>tr>th,
.table-style-3 table>thead>tr>td,
.table-style-3 table>tbody>tr>td,
.table-style-3 table>tfoot>tr>td {
border: none;
vertical-align: middle;
}
/* table striped Css*/
.table-style-3 table>tbody>tr:nth-child(even) {
background-color: #eaf8e6;
}
.table-style-3 table>tbody>tr:nth-child(odd) {
background-color: #ffffff;
}
.table-style-3 table>tbody>tr>td {
font-family: Montserrat-Regular;
font-size: 14px;
color: #808080;
line-height: 1.4;
padding-top: 18px;
padding-bottom: 14px;
}
.table-style-3 table>tbody>tr>td .allow-inline-edit:hover {
background-color: #57b846;
color: #000;
}
.table-style-3 table>tbody>tr>td .allow-inline-edit:hover:after {
color: #333333;
}
/* Search box */
.table-style-3 .input-group input.form-control.input-sm.padder {
border-right: none;
border: 1px solid #484848;
}
.table-style-3 .input-group-btn {
border: 1px solid #484848;
background: none;
border-left: none;
}
.table-style-3 .input-group-btn .btn {
background: none;
color: #484848;
padding: 0px 10px;
}
.table-style-3 .input-group-btn .btn:focus {
outline: none;
}
.table-style-3 .input-group-btn .btn:active {
box-shadow: none;
}
/* Multi-select checkbox */
.table-style-3 input[type='checkbox'] {
margin-top: -30px;
}
.table-style-3 input[type='checkbox'] {
-webkit-font-smoothing: antialiased;
text-rendering: optimizeSpeed;
width: 20px;
height: 20px;
margin: 0;
margin-right: 1px;
display: block;
float: left;
position: relative;
cursor: pointer;
}
.table-style-3 input[type='checkbox']:after {
content: "";
vertical-align: middle;
text-align: center;
line-height: 20px;
position: absolute;
cursor: pointer;
height: 20px;
width: 20px;
left: 0;
top: 0;
font-size: 12px;
-moz-box-shadow: inset 0 1px 1px #3699FF, 0 1px 0 #3699FF;
border: 1px solid #80808070;
background: #eaf8e6;
}
.table-style-3 input[type='checkbox']:hover:after,
input[type='checkbox']:checked:hover:after {
background: #eaf8e6;
content: '\2714';
color: #333333;
}
.table-style-3 input[type='checkbox']:checked:after {
background: #eaf8e6;
content: '\2714';
color: #333333;
border: 1px solid #80808070;
}
/* Relaod button */
.table-style-3 .table-actions .btn-primary {
background: none;
color: #2780e3;
border: 1px solid #2780e3;
}
.table-style-3 .table-actions .btn-primary:hover {
background: #2780e3;
color: #fff;
border: 1px solid #2780e3;
}
.table-style-3 .table-actions .btn-info {
background: none;
color: #9954bb;
border: 1px solid #9954bb;
}
.table-style-3 .table-actions .btn-info:hover {
background: #9954bb;
color: #fff;
border: 1px solid #9954bb;
}
.table-style-3 .table-actions .btn-danger {
background: none;
color: #ff0039;
border: 1px solid #ff0039;
}
.table-style-3 .table-actions .btn-danger:hover {
background: #ff0039;
color: #fff;
border: 1px solid #ff0039;
}
/* edit-delete-detail link Css */
.table-style-3 a.td-link.td-data-link {
background: #484848;
padding: 5px;
border-radius: 2.4rem;
text-align: center;
border: 1px solid #484848;
}
.table-style-3 .td-data-link i.fa {
color: #eaf8e6;
width: 15px;
font-size: 10px;
}
.table-style-3 .td-data-link:hover {
background: none !important;
color: #eaf8e6;
border: 1px solid #484848;
}
.table-style-3 .td-data-link:hover i {
color: #484848;
}
/*===============================================================================*/
/* table-style-3 */
/* table striped Css*/
.table-style-3 table>tbody>tr:nth-child(even) {
background-color: #e9faff;
}
.table-style-3 table>tbody>tr:nth-child(odd) {
background-color: #ffffff;
}
.table-style-3 .table-actions .pull-left,
.table-style-4 .table-actions .pull-right {
padding: 1rem;
}
.table-style-3 table,
.table-style-4 table>thead>tr>th,
.table-style-4 table>tbody>tr>th,
.table-style-4 table>tfoot>tr>th,
.table-style-4 table>thead>tr>td,
.table-style-4 table>tbody>tr>td,
.table-style-4 table>tfoot>tr>td {
border: 1px solid #00293338;
vertical-align: middle;
}
.table-style-3 table>thead>tr>th {
border: none;
font-family: Montserrat-Medium;
font-size: 12px;
color: #fff;
line-height: 1.4;
text-transform: uppercase;
background-color: #002933;
padding-top: 20px;
padding-bottom: 20px;
letter-spacing: 2px;
}
.table-style-3 table>thead>tr>th:hover {
background-color: #1a3f48 !important;
color: #fe3e64;
}
.table-style-3 .table-actions {
background-color: #e9faff;
border: none;
}
.table-style-3 table>tbody>tr>td {
font-family: Montserrat-Regular;
font-size: 14px;
color: #808080;
line-height: 1.4;
padding-top: 18px;
padding-bottom: 14px;
}
/* Search box */
.table-style-3 .input-group input.form-control.input-sm.padder {
border-right: none;
border: 1px solid #484848a3;
border-top-left-radius: 1rem;
border-bottom-left-radius: 1rem;
}
.table-style-3 .input-group-btn {
border: 1px solid #484848a3;
background: none;
border-left: none;
border-top-right-radius: 1rem;
border-bottom-right-radius: 1rem;
}
.table-style-3 .input-group-btn .btn {
background: none;
color: #484848a3;
padding: 0px 10px;
}
.table-style-3 .input-group-btn .btn:focus {
outline: none;
}
.table-style-3 .input-group-btn .btn:active {
box-shadow: none;
}
/* Relaod button */
.table-style-3 .table-actions .btn-primary {
background: none;
color: #2780e3;
border: 1px solid #2780e3;
border-radius: 1rem;
}
.table-style-3 .table-actions .btn-primary:hover {
background: #2780e3;
color: #fff;
border: 1px solid #2780e3;
}
.table-style-3 .table-actions .btn-info {
background: none;
color: #9954bb;
border: 1px solid #9954bb;
border-radius: 1rem !important;
}
.table-style-3 .table-actions .btn-info:hover {
background: #9954bb;
color: #fff;
border: 1px solid #9954bb;
}
.table-style-3 .table-actions .btn-danger {
background: none;
color: #ff0039;
border: 1px solid #ff0039;
border-radius: 1rem;
}
.table-style-3 .table-actions .btn-danger:hover {
background: #ff0039;
color: #fff;
border: 1px solid #ff0039;
}
.table-style-3 .table-actions .pull-right .btn.disabled {
background: #002933;
color: #e9faff;
opacity: unset;
}
/* Multi-select checkbox */
.table-style-3 input[type='checkbox'] {
margin-top: -30px;
}
.table-style-3 input[type='checkbox'] {
-webkit-font-smoothing: antialiased;
text-rendering: optimizeSpeed;
width: 23px;
height: 0px;
margin: 0;
margin-right: 1px;
display: block;
float: left;
position: relative;
cursor: pointer;
border-radius: 1rem;
border: 1px solid red;
bottom: 10px;
}
.table-style-3 input[type='checkbox']:after {
content: "";
vertical-align: middle;
text-align: center;
line-height: 20px;
position: absolute;
cursor: pointer;
height: 20px;
width: 20px;
left: 0;
top: 0;
font-size: 12px;
-moz-box-shadow: inset 0 1px 1px #3699FF, 0 1px 0 #3699FF;
border: 1px solid #80808070;
background: #e9faff;
border-radius: 1rem;
}
.table-style-3 input[type='checkbox']:hover:after,
input[type='checkbox']:checked:hover:after {
background: #e9faff;
content: '\2714';
color: #fe3e64;
}
.table-style-3 input[type='checkbox']:checked:after {
background: #e9faff;
content: '\2714';
color: #fe3e64;
border: 1px solid #80808070;
}
/* edit-delete-detail link Css */
.table-style-3 a.td-link.td-data-link {
background: #1a3f48;
padding: 5px;
text-align: center;
border: 1px solid #484848;
}
.table-style-3 .td-data-link i.fa {
color: #e9faff;
width: 15px;
font-size: 10px;
}
.table-style-3 .td-data-link:hover {
background: none !important;
color: #eaf8e6;
border: 1px solid #484848;
}
.table-style-3 .td-data-link:hover i {
color: #fe3e64;
}
</style>
Step 2
Add "table-style-3" to any table's CSS selector that you wish to change.
Original Community Post:
UI/UX CSS works - Community Discussions / Getting Started - Tadabase Community