Css for alternating row colors

Hello,

Yes, you are correct. You can do this with CSS. You will need to make a local copy of the tablmaster.css file in your theme folder. If there is no ‘css’ folder inside your theme folder then you will need to create one. Then, copy wp-content/plugins/tablemaster/css/tablemaster.css to wp-content/themes/<your theme>/css/tablemaster.css.

Then, edit the tablemaster.css file to set the background color for the cells in alternate columns. It appears you are not currently using tablemaster for the tables on the site at the link you provided. So, if you want to use the default table styling you would add this to the tablemaster.css file:

[ Moderator note: code fixed. Please wrap code in the backtick character or use the code button. ]

/*  Define the background color for all the ODD table columns  */
	#table tr td:nth-child(odd){
		background: #b8d1f3;
	}
	/*  Define the background color for all the EVEN table columns  */
	#table tr td:nth-child(even){
		background: #dae5f4;
	}

If you wanted to use one of the styles provided with tablemaster, you could do this instead: For example if you were using the ‘red-header-only’ class

/*  Define the background color for all the ODD table columns  */
	.red-header-only tr td:nth-child(odd){
		background: #b8d1f3;
	}
	/*  Define the background color for all the EVEN table columns  */
	.red-header-only tr td:nth-child(even){
		background: #dae5f4;
	}

Where you place these statements in your local tablemaster.css file in relation to the other CSS statements for the class is important. Be sure to place these statements at the end of the all the statements for the class so that they are applied after all of the other statements are applied.

Good luck,

Valerie

Then, copy wp-content/plugins/tablemaster/css/tablemaster.css to wp-content/themes/<your theme>/css/tablemaster.css.

Programatically that’s very cool that your plugin looks in the theme directory that way. But have you considered using wp-content/tablemaster.css instead?

When the theme updates then all that custom CSS will be lost. ??

Hi Jan,

That’s very interesting. I chose that method because I have seen it used in other plugins. But I can’t say that I have tested it with a theme update. I will look into that. Thanks for bringing it to my attention. But, here’s an alternative you can use in the tablemaster shortcode itself.

Try adding the “css” keyword to the table shortcode like this:

css=”.red-header-only tr td:nth-child(odd){background: #b8d1f3;} .red-header-only tr td:nth-child(even){background: #dae5f4;}”

Of course, replace the css selector and the color codes with the colors you want.

Valerie

Thank you Valerie,

Unfortunately I am not a professional web site developer. However I have some knowledge of CSS and HTML. I am using Weaver Xtreme theme which has a css entry section in the admin area which will survive updates to the theme.

I have tried using this inpute area and I have tried using your provided form but all to no avail.

I have achieved my original requirement of making the table responsive and I may just leave it there until I have more time available.

Thank you for your reply.
Pepper 2