Table Width

Hi,

sure, always glad when I can help!

Best wishes,
Tobias

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

Hi Tobias, new question for you. I created a new Tablepress table on this page and now I want to enable visitors who click a given button or link to be taken to a particular row of the table.

I have tried inserting anchor links <a name="row-name">Row Name</a> into each row of the table and then linking to them by entering a URL formatted this way:
https://www.themarketingquiz.com/other-plans#profitsharing/
in the URL field of certain menu items in Appearance > Menus.

So far it’s not working for me. When I click the menu button that should take me to the specified row of the table, it just takes me to the other-plans page, without scrolling down to the anchor. Any suggestions?

Hi Jim,

the link you are using is slightly wrong. Please try again with

https://www.themarketingquiz.com/other-plans/#profitsharing

The #profitsharing needs to be added after the second /.

Regards,
Tobias

Thank you for that VERY quick response, Tobias. But even when I include that second / in the destination URL, the other-plans page is not scrolling down to the row where the profitsharing anchor is.

Hi Jim,

the link needs to be exactly like in the gray box above. Additionally to adding that / as you did, you’ll have to remove the one after #profitsharing.

Regards,
Tobias

I thought I had read that there should be a / at the end of URLs entered for custom links in WP menus. Whatever, thanks, the page is now scrolling, but:

When I click the Profit Sharing button in the nav bar (under Retirement Plans), the other-plans page scrolls down a bit too far, so that the first paragraph of the Profit Sharing row is not visible.

To fix this I tried moving the id="profitsharing" attribute and value into the first <p> element of each row in the R-hand column and I eliminated all<a name= elements from the <h3> elements in L-hand column. Seems to make no difference.

Thank you for any suggestions you can offer to solve this scrolling issue.

Hi,

well, yes, URLs in the custom links should end with a /. The difference here is that the #profitsharing (called hash or fragment) is not really part of the URL, as it is not send to the server, but more like a command to the browser, on where to go after the URL has been loaded.
That’s why it is appended to the plain URL (which should have the /).

Now, I just tried with the link and the browser scrolls to the correct position for me. The text “Profit Sharing Plans are often …” aligns nicely with the top of the page content in the browser.
The only way to add some space above that would be to move the link target (i.e. the element with the id="profitsharing") higher. This will mean that you’d have to move it to the previous row.

Regards,
Tobias

Thanks, Tobias, for your help.

Hi,

sure, no problem! You are very welcome!

Best wishes,
Tobias

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

Hey Tobias,

First of all, I just installed your TablePress plugin and loving it so far!

Having a bit of difficulty though after resizing the first column in getting the first row to rezize

Here’s what I added to the Custom CSS:
.tablepress .column-1 {
width: 450px;
}

I have selected the option on my table “The first row of the table is the table header”

The problem is while the above CSS while it worked to resize every cell in the table it didn’t resize the header column

Thanks in advance for your help ??

Hi doogster,

thanks for your question, and sorry for the trouble.

That code looks correct, so I’m not sure what’s wrong. However, I’ll gladly take a look, but for that I’d need to you to post a link to the page with the table, please. Thanks!

Regards,
Tobias

Hey Tobias

Here’s the page I am testing on
https://www.cardperks.ca/category/issuers/amex/

I’ve selected Table Head Row to hold the first row as a header

What I noticed in the HTML code is when the first row is a header
the cells are wrapped in a div tag

ie: <div>Card Offer</div>

I tried unsuccessfully to add various .div formatting to the custom CSS settings…

Any help you can provide is greatly appreciated ??

Hi,

thanks for the link!

First: Don’t worry about the <div> wrappers. Those have no influence here, but are necessary for the sorting arrows.

Now, one reason for this problem might be the “Horizontal Scrolling” that is enabled for this table. As it is actually not needed, you should turn it off. So, please uncheck the corresponding checkbox on the “Edit” screen of the table.

The next step will then have to be to find a good combination of text size and width of the first column. Having the first column this wide will probably not work, because the header row cells also need space.
For that, I recommend to also decrease the font size in the head row, with this “Custom CSS”:

.tablepress thead th{
  font-size:10px;
}

Regards,
Tobias

Hey Tobias,

Thank you sooooo much for your help that worked!!!

Watch for a paypal donation coming through your site from me ??

Again really appreciate your help!

Hi,

very nice! Thanks for the confirmation!
Great to hear that this worked!

And thanks for wanting to donate, I really appreciate it!

Best wishes,
Tobias

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