[Plugin: TablePress] Show vertical lines (borders)

Hi,

thanks for your question.

The best way to do that is to add

.tablepress td {
  border: 1px solid #DDDDDD;
}

to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress.

Regards,
Tobias

Thank You very much, You`re the man!

Hi,

no problem, you are very welcome! ??

Best wishes,
Tobias

Hello Tobias ?? Me again, I need to ask two more questions.
I get errors when using #rowspan# and #colspan#, it jut wont work for me, as I get message: "DataTables warning (table id =tablepress-4) requested unknown parameter73` from the data source for row 1″

Also, there are no options like swap columns (a and b) or swap rows etc, like you have in wp-table reloaded… So i`m curious, will you implement this eventually?

Thank you for your time and dedication to our cause!
regards, Marko

Hi Marko,

thanks for your questions.

The reason for these error messages is that the DataTables JavaScript library (which brings the sorting/filter/pagination features) does not work in tables that have connected cells (via #rowspan# or #colspan#). So, you will have to decide: Either use DataTables or connected cells. Both at the same time is not possible, unfortunately.

And about column/row swapping: This is actually implemented, and it should be much easier than in WP-Table Reloaded now, although (as I see from your question) it’s not that obvious: You can now drag and drop the columns/rows, by clicking on their label (column name A, B, C, …/row name 1, 2, 3, …) and than dragging it to the new position.

Regards,
Tobias

“Well, This Is Embarrassing ?? Thank You Tobias, it was quite obvious, guess I wasn’t looking hard enough. But there`s an idea, you could post about that in a FAQ section, why not?
best wishes, Marko
P.s. I absolutely love the plugin!

Hi Marko,

great that this helped ??

Yes, I will add it to the FAQ page, once I find the time to update the entire website ??

And nice to hear that you like the plugin so much! Don’t forget to rate it in the plugin directory then ??

Best wishes,
Tobias

Just want to say that the CSS for enabling cell borders was helpful for me, too! It’s the most visible frontend difference in switching from WP-Table Reloaded to TablePress, IMHO. It’s good to have them back. ??

Thanks!

-Ken

Hi,

I guess the vertical borders are just personal preference ?? I, for example don’t like them (in most tables) ??
But with the flexibility of the CSS, everybody can have it as he wants. So, great that this piece of code was helpful!

Best wishes,
Tobias

Hi Tabias,

First off, kudos for a great plugin.

My question is regarding the CSS code that you provided above which allows the display of the table borders. For some reason, it’s not showing properly on our website, please see here: https://www.thewack.ca/s3-week-3/

As you can see, the top and the right borders are missing. Do you know what the problem is?

Thanks,
Vic

Hi Vic,

thanks for your post.

Due to CSS that is added by your theme, you’ll just need some slightly extended CSS code. Please replace your current “Custom CSS” with this:

.tablepress,
.tablepress tr,
.tablepress tbody td,
.tablepress thead th,
.tablepress tfoot th {
	border: 1px solid #dddddd;
}

Regards,
Tobias

I love you Tobias. You have all the answers!

Hi Linda,

well, I try ?? Great to hear that this helped!

Best wishes,
Tobias

I’m just migrating over to TablePress now. A very smooth transition so far! However, on some tables I’m getting a double thickness border on the horizontal lines, whereas the same tables in wp-tables-reloaded were only a single thickness. The specific tables don’t have any styling for their borders, so this is coming from the defaults. I get the same thing when I view it in both Firefox and IE.

I found that the old table defaults from wp-t-r weren’t coming through, so I grabbed this code from Firebug:

.tablepress {
	background-color: #CDCDCD;
	border-collapse: separate;
	border-spacing: 1px;
	font-size: 8pt;
	margin-bottom: 15px;
	margin-left: 0;
	margin-right: 0;
	margin-top: 10px;
	text-align: left;
	width: 100%;
}

.tablepress td {
	background-color: #FFFFFF;
	color: #3D3D3D;
	padding-bottom: 4px;
	padding-left: 4px;
	padding-right: 4px;
	padding-top: 4px;
	vertical-align: top;
}

.tablepress th,
.tablepress thead th {
	background-color: #E6EEEE;
	border-color: #FFFFFF;
	border-style: solid;
	border-width: 1px;
	color: #3D3D3D !important;
	padding-bottom: 4px;
	padding-left: 4px;
	padding-right: 4px;
	padding-top: 4px;
	text-align: center;
}

Maybe I left out some crucial styling? I tried to grab only the essential stuff.

Any help to get rid of the double thickness would be most appreciated. Thanks!

Here’s an example of a couple of tables. The top (with the logos) how has default horizontal lines, where it had none before (and should have no lines at all). The table grid below that shows the double thickness.

https://www.radonc.utoronto.ca/our-community/faculty/continuing-education/conferences/target-insight/sponsors

Thank you!

Hi,

thanks for your question, and sorry for the trouble.

To fix this, I suggest that you remove everything between

/* DEFAULT STYLES FROM WP-TABLE-RELOADED - FORMER PLUGIN */

and

/* TABLE 7 = RTi PLATINUM SPONSOR LEVELS

That will bring back the better TablePress default styling, without doube borders.

To then remove the borders on the top table again, change

.tablepress-id-19,
.tablepress-id-19 td,
.tablepress-id-19 th,
.tablepress-id-19 td {
	border-collapse: collapse !important;
	border-spacing: 0 !important;
}

to

.tablepress-id-19,
.tablepress-id-19 tr,
.tablepress-id-19 tbody td,
.tablepress-id-19 thead th,
.tablepress-id-19 tfoot th {
	border: none;
}

(See https://tablepress.org/faq/remove-borders-from-a-table/ for how I got this.)

Regards,
Tobias