Cell link

Hi,

thanks for your post, and sorry for the trouble.

I’m afraid that that is not directly possible, due to how links on the web work. You would need to use JavaScript to emulate that. For example, you could use JavaScript like https://www.ads-software.com/support/topic/make-row-clickable/#post-4131178
If you change the 'tr' to 'td', this would apply to all table cells individually, instead of just rows.

Regards,
Tobias

Hi Tobias,

Thanks, I did see that post, but wasn’t sure how to do it for specific cells, not rows.

I’ll try that method.

In this scenario, if I have 1 row with 2 columns, and I only want the 2nd cell to be clickable how would I do this?

Thanks,
Steve

Would something like this work?

.tablepress-id-4 .column-2 td a {
display: block;
position: relative;
}

Hi,

no, that would not help, I’m afraid, as this is CSS code that would only affect the styling.

You could try adding this JavaScript code below the table Shortcode on the page where you are displaying the table:

<script>
jQuery(document).ready(function($){
  $('.tablepress-id-1').on( 'click', '.column-2', function() {
    const $a = $(this).find('a');
    if ( $a.length )
      window.location = $a.attr('href');
  } );
});
</script>

Make sure to change the .tablepress-id-1 part to the correct table ID.

Regards,
Tobias

Where do you put the url?

Hi,

you would insert a normal link into the cell. That link would then be clicked “virtually” when you click anywhere in the cell.

Regards,
Tobias

Doesn’t work.

Thanks for your help. I know you’re offering free support and I appreciate it.

This is the page: https://www.greenpointloans.com (the yellow button “start here” is the cell)

Hi,

ok, you’ll need to modify the CSS for this cell a bit, because the padding in the cell would not be clickable.
Please change the “Custom CSS” for that column to

.tablepress-id-4 .column-2 {
    width: 280px;
    background-color: #FCDC3B;
    text-align: center;
    padding: 0!important;
    vertical-align: middle;
    line-height: 150px;
}

It might then actually be possible to remove the JavaScript code as the link already spans the full cell.

Regards,
Tobias

Hi Tobias,

It worked with these:

.tablepress-id-4 .column-2 {
	width: 280px;
	background-color: #FCDC3B;
	text-align: center;
	padding: 0 !important;
	vertical-align: middle;
	line-height: 150px;
}

.tablepress-id-4 .column-2 a {
	color: #000;
	display: block;
	position: relative;
}

When I removed the (.tablepress-id-4 .column-2 a) CSS part, it would not work.

I was also able to remove the javascript from the page.

Thanks again,
Steve

• This reply was modified 4 years, 7 months ago by Canopie.

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!