Show only outer borders?

Hello.

Our apologies for replying so late to your question.

You can use custom?CSS to achieve this in our Lite version.

I am just not sure which table type are you using.

1. If you use Simple Tables :

For example, first in the Simple Table’s back-end settings,

in the Display settings, check Remove borders, and if you use the first row as table header,

Here is custom?CSS you can add, either to the WP page, or in our main plugin settings/Custom JS and CSS/Custom CSS :

.wpdt-c.wpDataTableContainerSimpleTable .wpdtSimpleTable.wpDataTable tr td:last-child {
    border-right: 1px solid black !important;
    
   
}
.wpdt-c.wpDataTableContainerSimpleTable .wpdtSimpleTable.wpDataTable tr:first-child td:first-child {
    border-top: 1px solid black !important;
}
.wpdt-c.wpDataTableContainerSimpleTable .wpdtSimpleTable.wpDataTable tr td:first-child {
    border-left: 1px solid black !important;
    
    
}
.wpdt-c.wpDataTableContainerSimpleTable .wpdtSimpleTable.wpDataTable tr:first-child {
    border-top : 1px solid black !important
}
.wpdt-c.wpDataTableContainerSimpleTable .wpdtSimpleTable.wpDataTable tr:last-child {
    border-bottom : 1px solid black !important
}
/* If you use first row as Headers */
.wpdt-c.wpDataTableContainerSimpleTable .wpdtSimpleTable.wpDataTable th:first-child {
    border-left: 1px solid black !important;
}
.wpdt-c.wpDataTableContainerSimpleTable .wpdtSimpleTable.wpDataTable th:last-child {
    border-right: 1px solid black !important;
}

This is how the Simple Table would look :

?

?

If you do not use first row as Header, remove the last part of the CSS code under my comment “If you use first row as Headers”.

?

Custom code needs to be applied to the page where the booking form is. Depending on what you’re using (Gutenberg blocks, or some page builder), adding the CSS or JS can be done in a few different ways. 

If you need help with adding custom CSS to the page, please take a look at this article.

2. If you use other table type, that is not Simple Tables :

.wpDataTablesWrapper table.wpDataTable > thead > tr > th{
    border-top: 2px solid blue !important;
}
.wpDataTablesWrapper table.wpDataTable > thead > tr > th:first-child{
    border-left : 2px solid blue !important;
}
.wpDataTablesWrapper table.wpDataTable > thead > tr > th:last-child{
    border-right : 2px solid blue !important;
}
.wpDataTablesWrapper table.wpDataTable > tbody > tr > td:first-child{
    border-left : 2px solid blue !important;
}
.wpDataTablesWrapper table.wpDataTable > tbody > tr > td:last-child{
    border-right : 2px solid blue !important;
}
.wpDataTablesWrapper table.wpDataTable > tbody > tr:first-child > td{
    border-top : 2px solid red !important;
}
.wpDataTablesWrapper table.wpDataTable > tbody > tr:last-child > td{
    border-bottom : 2px solid blue !important;
}

It would look like this :

We hope this helps. The Lite version does not have the built-in “Customize” options for borders in dataTables, so you would need to use Custom CSS like that.

Of course, you can change the border properties as needed, we used 2 pixel width and blue color,

but you can change it to anything you need. You can learn more about CSS borders here?.

Let us know if you have any additional questions.
Thank you.

Thanks a lot! I’ll implement this in a next update of my website ??

Hello.
You’re welcome, we are happy to help.
Just one correction to the CSS we sent for other dataTable types that are not Simple Tables.
Since we don’t have the Customize built-in options in the Lite Version,
you also have to additionally remove the inner cell borders, with this :

.wpDataTablesWrapper table.wpDataTable > tbody > tr > td {
border : none;
}

So, you can just add this at the top of all other CSS, because in CSS , if there is a property that is set later,
it is overriding the “previous” lines.
First we will set the table to not have any cell borders,
and later when you add the other lines where we tell it to set “right” , “bottom”, and “top” borders in just some specific cells,
it is going to work since the lines we add later will have higher priority.
–
This is how the full CSS would look ( for tables other than Simple Tables) :

.wpDataTablesWrapper table.wpDataTable > tbody > tr > td {
    border : none;
}

.wpDataTablesWrapper table.wpDataTable > thead > tr > th{
    border-top: 2px solid blue !important;
}

.wpDataTablesWrapper table.wpDataTable > thead > tr > th:first-child{
    border-left : 2px solid blue !important;
}

.wpDataTablesWrapper table.wpDataTable > thead > tr > th:last-child{
    border-right : 2px solid blue !important;
}


.wpDataTablesWrapper table.wpDataTable > tbody > tr > td:first-child{
    border-left : 2px solid blue !important;
}

.wpDataTablesWrapper table.wpDataTable > tbody > tr > td:last-child{
    border-right : 2px solid blue !important;
}

.wpDataTablesWrapper table.wpDataTable > tbody > tr:first-child > td{
    border-top : 2px solid red !important;
}
.wpDataTablesWrapper table.wpDataTable > tbody > tr:last-child > td{
    border-bottom : 2px solid blue !important;
}

And a screenshot from our dummy table linked to CSV file, after applying it :

Just wanted to add that correction for removing the “inner borders”.
When you try this, please don’t hesitate to reach out to us if you encounter any issues.
Thank you.