Hello,

I will advise you on different ways how you can hide Column Headers.

We will start from the easiest way, to just hide all headers of a specific Table on a WP Page, then we will go over some 'more advanced' ways how you can choose to hide just specific Headers on a Table, etc.

1. If you wish to hide all Headers on a specific Table, and if this table will be on its own on the WP Page, then the CSS you already found does the trick.

Use this custom CSS code :

.wpdt-c .wpDataTablesWrapper table.wpDataTable thead {
display: none !important;
}

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.

Here is my example, I will just go to my Page with the Table, then go to the Theme's Customize section ( i use Astra Theme for this example) and here I an add "Additional CSS".

Then publish the change, and that's it.

-

2. If you wish to 'target' a specific Table ID only, do this :

.wpdt-c .wpDataTablesWrapper table.wpDataTableID-1 thead {
display: none !important;
}

Just change the 1 to your Table ID.

3. This is a workaround if you wish to try just hiding some specific Column Headers, while leaving others visible :

Add a custom CSS class in the Column's Display settings, for each column we wish the header to "hide".

I will name the class "hideHeader" , but you can name it anything you wish.

Then add this CSS into your custom CSS tab:

th.wdtheader.hideHeader { 
   display: none;
}

So now, any Column that has that class is going to hide it's Header.

Let me know how it goes and if you have any questions.