Hi Stefan,

I will advise on 

For the Simple Tables,

first In the cell of your table, you need to add a custom class to your button.

For example like this :

<a href="yourURLlink" target="_blank" class="customclass">Click here to see more</a>

The target blank is optional, that is to open the link in a new tab.

In this case, we named the class "customclass", but you can choose any class name.

Then, visit this website, generate your custom styled button, and click on "Get Code":

In the right part of the screen, you'll see the code you need for this button:

Copy the code without the first row and change "myButton" to the custom class you added in step 1, so instead of this:

.myButton {
	background-color:#51d1c6;
	border-radius:28px;
	border:1px solid #1995ab;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:17px;
	padding:16px 31px;
	text-decoration:none;
	text-shadow:0px 1px 0px #2f6627;
}
.myButton:hover {
	background-color:#5a9615;
}
.myButton:active {
	position:relative;
	top:1px;
}

You would use this:

.customclass {
    background-color:#51d1c6 !important;
    border-radius:28px;
    border:1px solid #1995ab;
    display:inline-block;
    cursor:pointer;
    color:#ffffff !important;
    font-family:Arial;
    font-size:17px;
    padding:16px 31px;
    text-decoration:none;
    text-shadow:0px 1px 0px #2f6627;
}
.customclass:hover {
    background-color:#5a9615;
}
.customclass:active {
    position:relative;
    top:1px;
}

In the Plugin, for Simple Tables to add CSS,

we need to go to main Plugin settings/Custom JS and CSS/Custom CSS,

and add your code there.

Note that for some properties,

if your Theme overrides them, you need to add this !important clause.

In my example, i had to add one to the background-color,

and the color ( which is the font text color) and then it looked as i intended.

Let me know how it goes, and if you encounter any issue with this.

With this method, any table that has this class for any button, is going to receive the same style.

-

Or if you want this style of button only to apply to a specific Table,

you can add the Table ID to your CSS selector like this :

#wpdtSimpleTable-12 .customclass {
    background-color:#51d1c6 !important;
    border-radius:28px;
    border:1px solid #1995ab;
    display:inline-block;
    cursor:pointer;
    color:#ffffff !important;
    font-family:Arial;
    font-size:17px;
    padding:16px 31px;
    text-decoration:none;
    text-shadow:0px 1px 0px #2f6627;
}
#wpdtSimpleTable-12 .customclass:hover {
    background-color:#5a9615;
}
#wpdtSimpleTable-12 .customclass:active {
    position:relative;
    top:1px;
}

Just change the Table ID 12 to your Table ID.

I hope this helps!

Hi Stefan,

1. I am happy to see that you managed to get your custom Button style as needed, great.

2. In regards to manipulating the font for the table :

If you just wish all the cells of the Table to have the same font, you can add this CSS,

you can just choose the default font above the Table back-end in the "Edit Data" settings :

If you don't have this font added to your WordPress for available fonts and you wish to do so,

our Support does not cover that, but you can search online for tutorials, such as this one :

How to Use Google Fonts With WordPress.

I hope that helps.

-

If you want to add a specific font to only specific cells,

You can add a CSS class directly in a cell of a table, for example wrapped inside a DIV container :

<div class=”abc”>Some text in the cell</div>

Then on the front end, we would add this custom CSS:

td .abc {  
 font-family : 'Montserrat' !important;
}

and this will, for example, change the font to Montserrat, as long as you have this font available in your Website.

-

This way of adding CSS class to your cells,

you can use the same method to add any CSS rules that you wish to apply.

–

3. In regards to custom borders,

this will require a bit more advanced work,

could you please open a new/separate ticket for this one and we can focus better for that particular subject there?

Thank you.

When you have multiple questions or issues which are for different subjects/topics,

 please open a new ticket for each subject, and we will help/advise more effectively. 

In that way, issues and questions which are related to different subjects will be in separate tickets so other users or our support agents can find them easily. 

Our policy is to have one issue or question per ticket for the reasons described already.

Thank you for understanding.

Hi Stefan,

Apology for the delay on my reply.

-

In regards to this space between columns,  i see what you mean on the page.

If i inspect the HTML of the cell in the second column, for some reason that column width is too wide, a little bit below 500 pixels.

I think you need to reduce the width of this Column.

You can either go in the Table's back-end and drag the edge of the Column with clicking and dragging of the mouse to reduce this Column's width manually,

or you can use CSS, like this :

You can add a CSS class directly in a cell of a table,  and then you can edit, for example, for cell number 1 :

<div class="customwidth">cell content</div>

Then on the front end we would add this custom CSS:

td .customwidth{
   width: 350px;
}

and this will change the column width on the front-end.

Of course, you can use any name for your custom CSS class,

and each cell that has that class will be affected.

It is a similar method to do any CSS rules that you wish to apply.

-

If you wish to add the same CSS to all tables, 

so then any table that has one or more cells with that specific class, can be affected with the style you add here.

You can add this to main plugin settings/Custom JS and CSS/Custom CSS.

Let me know if that helped.