Issue where the link in the first column of a horizontal scrolling table is unclick

In my attempt to create a fixed first column horizontal scrolling table, I encountered an issue where hyperlinks in the first column become unclickable once scrolled to the right. This seems to be because the fixed column is not clickable by default, and only works initially due to the duplicate link in the underlying table. Is there a solution to ensure that the hyperlink remains clickable even when the table is scrolled to the right?

// Using jQuery library
jQuery(document).ready(function() {
   jQuery(".main-table").clone(true).appendTo('#table-scroll').addClass('clone');   
 });
.table-scroll {
position:relative;
max-width:600px;
margin:auto;
border:1px solid #000;
}
.table-wrap {
width:100%;
overflow:auto;
}
.table-scroll table {
width:100%;
margin:auto;
border-collapse:separate;
border-spacing:0;
}
.table-scroll th, .table-scroll td {
padding:5px 10px;
border:1px solid #000;
background:#fff;
white-space:nowrap;
vertical-align:top;
}
.table-scroll thead, .table-scroll tfoot {
background:#f9f9f9;
}
.clone {
position:absolute;
top:0;
left:0;
pointer-events:none;
}
.clone th, .clone td {
visibility:hidden
}
.clone td, .clone th {
border-color:transparent
}
.clone tbody th {
visibility:visible;
color:red;
}
.clone .fixed-side {
border:1px solid #000;
background:#eee;
visibility:visible;
  z-index: 10;
  position: relative;
}
.clone thead, .clone tfoot{background:transparent;}
<!DOCTYPE html><html lang='en' class=''>
<!-- HTML content here -->
</body></html>

For the original code reference, please visit: https://codepen.io/paulobrien/pen/gWoVzN

jquerycss

Answer №1

Due to the disabled pointer events on the .clone class, clicks are being prevented as it acts as a pointer event blocker. To address this issue, I have made some modifications to the styles of the .clone element:

// utilizing jquery library
jQuery(document).ready(function() {
   jQuery(".main-table").clone(true).appendTo('#table-scroll').addClass('clone');   
 });
.table-scroll {
position:relative;
max-width:600px;
margin:auto;
border:1px solid #000;
}
.table-wrap {
width:100%;
overflow:auto;
}
.table-scroll table {
width:100%;
margin:auto;
border-collapse:separate;
border-spacing:0;
}
.table-scroll th, .table-scroll td {
padding:5px 10px;
border:1px solid #000;
background:#fff;
white-space:nowrap;
vertical-align:top;
}
.table-scroll thead, .table-scroll tfoot {
background:#f9f9f9;
}
.clone {
position:absolute;
top:0;
left:0;
}
.clone th, .clone td {
visibility:hidden
}
.clone td, .clone th {
border-color:transparent
}
.clone tbody th {
visibility:visible;
color:red;
}
.clone .fixed-side {
border:1px solid #000;
background:#eee;
visibility:visible;
  z-index: 10;
  position: relative;
}
.clone thead, .clone tfoot{background:transparent;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="table-scroll" class="table-scroll">
  <div class="table-wrap">
    <table class="main-table">
      <thead>
        <tr>
          <th class="fixed-side" scope="col">&nbsp;</th>
          <th scope="col">Header 2</th>
          <th scope="col">Header 3</th>
          <th scope="col">Header 4</th>
          <th scope="col">Header 5</th>
          <th scope="col">Header 6</th>
          <th scope="col">Header 7</th>
          <th scope="col">Header 8</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th class="fixed-side"><a href="www.google.com" target="_blank">Left Column</a></th>
          <td>Cell content<br>
            test</td>
          <td><a href="#">Cell content longer</a></td>
          <td>Cell content</td>
          <td>Cell content</td>
          <td>Cell content</td>
          <td>Cell content</td>
          <td>Cell content</td>
        </tr>
        <tr>
          <th class="fixed-side">Left Column</th>
          <td>Cell content</td>
          <td>Cell content longer</td>
          <td>Cell content</td>
          <td>Cell content</td>
          <td>Cell content</td>
          <td>Cell content</td>
          <td>Cell content</td>
        </tr>
        <tr>
          <th class="fixed-side">Left Column</th>
          <td>Cell content</td>
          <td>Cell content longer</td>
          <td>Cell content</td>
          <td>Cell content</td>
          <td>Cell content</td>
          <td>Cell content</td>
          <td>Cell content</td>
        </tr>
        <tr>
          <th class="fixed-side">Left Column</th>
          <td>Cell content</td>
          <td>Cell content longer</td>
          <td>Cell content</td>
          <td>Cell content</td>
          <td>Cell content</td>
          <td>Cell content</td>
          <td>Cell content</td>
        </tr>
        <tr>
          <th class="fixed-side">Left Column</th>
          <td>Cell content</td>
          <td>Cell content longer</td>
          <td>Cell content</td>
          <td>Cell content</td>
          <td>Cell content</td>
          <td>Cell content</td>
          <td>Cell content</td>
        </tr>
        <tr>
          <th class="fixed-side">Left Column</th>
          <td>Cell content</td>
          <td>Cell content longer</td>
          <td>Cell content</td>
          <td>Cell content</td>
          <td>Cell content</td>
          <td>Cell content</td>
          <td>Cell content</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <th class="fixed-side">&nbsp;</th>
          <td>Footer 2</td>
          <td>Footer 3</td>
          <td>Footer 4</td>
          <td>Footer 5</td>
          <td>Footer 6</td>
          <td>Footer 7</td>
          <td>Footer 8</td>
        </tr>
      </tfoot>
    </table>
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The Jquery .change() function refreshes the results just once

I am working on a form with 3 input fields named #first, #second, and #third, along with a fourth field labeled as #theResult. <div id="addFields"> <span id="addFieldsHeader">Add The Fields</span> <table style="margin:0 auto;"> ...

javascriptjquery

Incorporating fontawesome icons ABOVE custom menu items in WordPress

In the process of customizing a menu in WordPress, I am looking to add fontawesome icons above each list item. In the past, I achieved this using the following code: <ul> <li> <a href="#"> <i class="fa fa-home"></i&g ...

phpcsswordpresslistmenu

Exploring the power of JQuery Ajax and manipulating Object fields

I am trying to figure out how to properly set the value of this field in my code: MyObject = function(){ this.field = null; this.build = function(){ var my_url = "..."; var my_data = "..."; $.get(my ...

jqueryajaxobject

Sliding Up Transition Effect for Footer with JQuery or CSS3

I am attempting to replicate a sleek slide up footer that caught my eye on The Internship Movie Site. I have created the wireframe layout, but I am struggling to figure out the correct CSS transition effect. Although I have experimented with the "top" and ...

jqueryhtmlcss

Is there a method to pre-load a CSS background image so that it can still be displayed even without an internet connection?

Situation: Imagine having a web app that shows an error message when trying to perform an action but fails due to a connectivity problem. The error dialogue has a CSS class with a background image that can't load because of the connection issue, res ...

javascriptcss

Ensure you click the Google captcha v3 button two times in order to successfully carry out the action

I recently integrated recaptcha v3 into a form and encountered an issue where the submit button had to be clicked twice to function correctly. Upon the first click, the captcha validation is triggered. After the second click, the form will successfully red ...

javascriptphpjquerygoogle-calendar-api

Prevent vertical scrolling only on mobile devices while allowing horizontal scrolling

Currently, I am working on a web page that utilizes a horizontal layout. However, when viewing the page on mobile devices, I want to restrict scrolling to only the horizontal direction, preventing users from being able to scroll up or down. As it stands n ...

jqueryhtmlcssscroll

Acquire a numerical value from a text source and increment it by one using Jquery

I have a simple task of extracting a single number from a particular div. Once obtained, I intend to increment the number by one. However, despite successfully retrieving the number, my attempts to add one to it are not working as expected. For example: ...

javascriptjquery

Having trouble with applying a custom class to React Bootstrap tabs?

When utilizing the react bootstrap tabs component, I encountered an issue with implementing a custom CSS style for the nav-link element within it using a customized parent class indicator. <Tabs defaultActiveKey="signup_renter" i ...

cssreactjsbootstrap-4tabsreact-bootstrap

Validate a list of checkboxes using jQuery to mark them as checked or unchecked

After upgrading to jQuery 1.9, my script that handles checking and unchecking checkboxes has stopped working properly. I have a main checkbox that should select or deselect a list of checkboxes in a table. However, after updating to the new version of jQu ...

jquery

Submitting multiple files individually using AJAX and formData in a file upload process

Having a form wherein three separate file uploads needs to be done through three distinct file inputs is presenting a challenge. While using AJAX and formData, I've managed to successfully upload the first file, however, subsequent files are not being ...

jqueryajaxfile-uploadmultipartform-dataform-data

When the user clicks on the element, it triggers a function that

    Recently, I implemented a select menu that triggers a post function via ajax when a user selects an option. This function generates table rows using PHP and returns the HTML code for them. Within these generated rows, there is an Add button.   My ...

phpjqueryajaxbutton

Pick the final offspring of the HTML element that is not assigned to a specific class

Currently, I am attempting to target the final element of a child that lacks a specific class. You can view my progress on this JSFiddle. <aside class="col2"> <div class="infobox teal"></div> <div class="infobox mediumbrown"&g ...

jquerycss

Using the <ins> element to push content into a separate div lower on the webpage

My text inside the <p> element is being pushed down by the presence of the <ins> tag. Removing the <ins> tag from the DOM using developer tools results in my text returning to its expected position. main { max-width: 1000px; ma ...

htmlcss

When styled with an id, the DIV element does not inherit styles from a CSS class

I seem to be facing an issue with the code below, possibly due to using both class and id in the same div. Despite knowing they are meant to work together. For more information: Can I use DIV class and ID together in CSS? .PB { position: relative; ...

htmlcssclass

How to organize PHP JSON data using JavaScript

I need help sorting PHP JSON data from a multidimensional array using JavaScript or jQuery. Here is my PHP code: $array = array(); $x = 0; while($row = $get_images->fetch_assoc()){ $name = $row['name']; $image_type = $row['image_ ...

javascriptphpjqueryjson

Fileinput created dynamically does not trigger change event on Internet Explorer

I am looking to dynamically create file input elements, but I am experiencing an issue with IE where I can't bind to the change event. I have tried using different methods such as using the .change() function, .bind('click'), and .on('c ...

jqueryfileinternet-explorerevent-handlingjquery-events

Email-box appears in a seemingly "random" location

I am currently engrossed in my informatics project, which involves building a sample dating site. However, I have encountered some difficulties in getting everything to align correctly. Everything was working fine until my email box appeared in the wrong p ...

htmlcsstextboxmarginpadding

What is the best approach for managing unexpected AJAX requests in Wicket 7?

I successfully recreated the example from W3Schools for jQuery AJAX using Resource mounting in Wicket. But, I am curious if there are more efficient methods for handling random AJAX requests. ...

jqueryajaxwicket

The remote rule in the jQuery Validate plugin does not return a boolean value

Is there a way to call a servlet using a remote field in jQuery validator to check if an already inserted username exists? The challenge is that the call needs to be made using JSONP, and the response is not a boolean or string but a JSON object with possi ...

jqueryajaxjquery-validatejsonp