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://wordpress.org/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
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!
