TinyMCE remove table borders

TinyMCE is a fantastic Javascript library that allows for rich text entry on the web. I like it very much but was not happy that it would put borders around the tables.

After looking at their CSS, I was able to see how to override the table format using my own CSS.

First we need to tell TinyMCE to use a custom content css.

tinymce.init({
              selector:'textarea',
	      content_css : "/css/tinyMCE.css",
	      plugins: ["image","print","table","code"],
              image_advtab: true
	     });

Then in our CSS we need to overide these styles:

table.mce-item-table,.mce-item-table td,.mce-item-table th,.mce-item-table caption{
border: none;
}

That is it, now the tables have no borders.

You can certainly add different borders instead of removing them all together.

Advertisements
Tagged , ,

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: