Vertical/column lines only

Hi,

thanks for your post, and sorry for the trouble.

Yes, that’s possible. Please add this to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:

.tablepress-id-123 thead th,
.tablepress-id-123 tbody td {
  border-top: none;
  border-bottom: none;
  border-left: 1px solid #cccccc;
  border-right: 1px solid #cccccc;
}

Regards,
Tobias

Hi Tobias,

Thank you! This is almost perfect and I should’ve been more specific. I only want vertical lines between two columns. The code above places a vertical line at the very left border and very right border (outline) of the table as well, which I don’t want (in the responsive tables either).

Is this possible to avoid the table outline in all table modes (normal/responsive) but keep the vertical lines in between two columns

Thanks!

Hi,

for that, please re-try with this version:

.tablepress-id-123 thead th,
.tablepress-id-123 tbody td {
  border-top: none;
  border-bottom: none;
  border-left: 1px solid #cccccc;
  border-right: 1px solid #cccccc;
}
.tablepress-id-123 thead th:first-child,
.tablepress-id-123 tbody td:first-child {
  border-left: none;
}
.tablepress-id-123 thead th:last-child,
.tablepress-id-123 tbody td:last-child {
  border-right: none;
}

Regards,
Tobias

Hi Tobias,

Thank you. That works except for one thing. When in responsive mode, the right-most border (outline) of the right-most column is still there. However, it isn’t there when the table is fully expanded on a large screen.

Thanks

Hi,

Can you please post a link to the page with the table where this problem happens, so that I can take a direct look? Thanks!

Regards,
Tobias

Sorry, I don’t have anything up yet, just playing around with the plugin. I’m using the latest version of chrome and the plugin doesn’t have any other custom CSS other than what you gave me above.

Maybe it’s just my theme then, if it works on your end?

Hi,

it could be the theme, yes, but to find out more, I’d need to be able to investigate the page with the developer tools in the browser.
In any case, it will be possible to remove the border.

Regards,
Tobias

Ok, I got a page up with it! Here is the link: https://shoutkey.com/east

Thank you!

P.S. The only CSS is the one you gave me up above.

Hi,

thanks for the link! This is rather tricky…

Please try with this new CSS:

.tablepress-id-1 thead th,
.tablepress-id-1 tbody td {
  border-top: none;
  border-bottom: none;
  border-left: 1px solid #cccccc;
}
.tablepress-id-1 thead th:first-child,
.tablepress-id-1 tbody td:first-child {
  border-left: none;
}

By only working with a left border, we might be able to make this work.

Regards,
Tobias

Brilliant! This did it. Thank you very much!

Hi,

no problem, you are very welcome! ?? Good to hear that this helped!

Best wishes,
Tobias

P.S.: In case you haven’t, please rate TablePress here in the plugin directory. Thanks!

Hey Tobias,

I got the columns in the table on the bottom of this page to work (like you helped me earlier today). But I need to make a darker border between each day of the week – but as you can see, I have a lot of merging going on. I have looked through various threads and have not found a solution to this specific problem, as I do not need the header included. I have tried some of the codes in the various threads, but nothing is working ??

Thanks!

Hi,

how about:

.tablepress-id-175 tbody .column-2,
.tablepress-id-175 tbody .column-5,
.tablepress-id-175 tbody .column-8,
.tablepress-id-175 tbody .column-12,
.tablepress-id-175 tbody .column-15 {
	border-left: 3px solid #000000 !important;
}

Regards,
Tobias

Thanks – it worked – mostly.

I also applied it on the last column on the right, but as you can see, in the second row at the end, where it says “Thursday,” there is no border.

.tablepress-id-175 tbody .column-16 {
	border-right: 1px solid #000000 !important;
}

I also applied it to the bottom of some of the rows – but something similar happened. I applied it to the bottom of the 6th row, and you can see that in the first two columns of the 6th row, it was not applied. Same as in row 11; and then the same thing in row 12 at the last column, and same with row 15, at the in the first two columns and the next to last column.

.tablepress-id-175 tbody .row-2,
.tablepress-id-175 tbody .row-6,
.tablepress-id-175 tbody .row-7,
.tablepress-id-175 tbody .row-11,
.tablepress-id-175 tbody .row-12,
.tablepress-id-175 tbody .row-15 {
	border-bottom: 1px solid #000000 !important;
}

How can I fix this?

Thanks!