Styled Table

Style: choose the style you wish to use

Content: here you can edit your table as usually

Row headers for responsive: choose how to display your rows in on mobile devices

Useful CSS

Table style 1 background and border color:

.gem-table thead th {
    background-color: #ccc;
}
.gem-table-style-1 tr:nth-child(even) td {
    background-color: #ccc;
}
.gem-table-style-1 td {
    border: 1px solid #eee !important;
}

Table style 2 background and border color:

.gem-table thead th {
    background-color: #ddd !important;
}
.gem-table-style-2 td, .gem-table-style-2 thead {
    border: 2px solid #dfe5e8 !important;
}

Table style 3 background colors:

.gem-table-style-3 thead tr th:nth-child(odd) {
    background-color: #111111;
}
.gem-table-style-3 thead tr th:nth-child(even) {
	background-color: #222222;
}
.gem-table-style-3 tr:nth-child(even) td {
	background-color: #333333;
}
.gem-table-style-3 tr:nth-child(even) td:nth-child(even) {
	background-color: #444444;
}
.gem-table-style-3 tr:nth-child(odd) td{
	background-color: #555555;
}
.gem-table-style-3 tr:nth-child(odd) td:nth-child(odd) {
    background-color: #666666;
}

You can modify this css and insert it in Theme Options -> Custom CSS to apply on all tables:

To apply this custom CSS on a single content element only, use the "Extra class name" field in this element in WPBakery:

The example of the css selector for the "custom-table" class name in this case:

.custom-table .gem-table thead th {
    background-color: #ccc;
}