[Plugin: WP-Table Reloaded] Formatting Help?

Hi,

Great plugin. And I sense a lot a passion – and patience – on the part of Tobias.

I’ve spent the afternoon trying to solve a problem deleting the cell borders.

Inserting:

.wp-table-reloaded-id-N {
border: none!important;
border-collapse: collapse!important;
border-spacing: 0px!important;
}

… as per FAQ left me with horizontal lines still in place. I tried many permutations: Making my shortcode [table id=3 cellspacing=”0″ /], adding td to the ‘table-reloaded’ line, changing the border line to color: 1px solid #XXXXXX, disabling other plugins, etc.

By accident, I solved it. By INSERTING THE ‘BORDER’ CSS TWICE! I know this can’t be right, but it works. My entire custom CSS now looks like this:

.wp-table-reloaded .column-1 {
width: 150px;
}

.wp-table-reloaded .column-2 {
width: 400px;
}

.wp-table-reloaded td {
font-family: Arial, Helvetica, Sans-serif;
font-size: 12px;
color: #7372AB;
border: none!important;
border-collapse: collapse!important;
border-spacing: 0px!important;
}

.wp-table-reloaded .row-hover tr:hover td {
background-color: #EFEFEF;
}

.wp-table-reloaded {
border: none!important;
border-collapse: collapse!important;
border-spacing: 0px!important;
}

If I delete either of the ‘border’ sections, I revert to horizontal lines. Just wondered if this makes sense to anyone – it’s driven me nuts. I’m afraid I can’t point you to a page because I’m working in MAMP (could this be a cause? Surely not).

Thanks …

Hi Dan,

thanks for your comment!

Good that you solved the issue, and I will try to shed some light ??

(Firstly, so that I don’t forget about it, nope, your site being on a MAMP is no reason to the problem.)

In your CSS, you have actually not inserted the CSS twice (technically), because it applies to different selectors. The first one removed all borders from table cells (the “td” in the code), while the second one removes the borders from the table. I know that sounds weird, but that’s just how CSS works.
Now, in a default setup, one of the two should be enough, as my plugin only adds borders to the cells (if I remember correctly at the moment). Now, it might be possible that some other thing on your site (the theme or a plugin) adds CSS for tables also (some themes do). So, I guess that just lead to all of those borders added – which required some more cleanup code, to remove them… ??

Now, actually there’s another thing. Table cells can not only have borders, but also spacing around them. And in certain circumstances (e.g. when there are background colors are set for the table), the spacing can look like a border (although it technically isn’t one).
Most browsers usually behave nicely and let you customize that border or spacing with CSS. Internet Explorer doesn’t (of course…). Instead, it requires that the actual HTML sets the spacing to zero (that’s what that Shortcode parameter is for).

So, as you can see: CSS (especially for borders) on tables is really tricky and a lot of factors weigh in. Thus, it is totally not easy to come up with “one code that works for all”. ??

But great to hear that you got it to work, and thanks that you kept trying so hard!

Best wishes,
Tobias

Hi Tobias,

Well, that excellent response means I feel a lot less like an idiot! Thanks for your excellent work. Undoubtedly worthy of a small donation in lieu of a shared stein.

Cheers.