Gradually conceal the final column of an HTML table with the combination of CSS and JavaScript

My challenge involves modifying a table on Sharepoint with responsive design in mind. The goal is to hide the last visible column in the table based on the screen's width.

For instance, if a user creates a 10-column table and the screen size is 1200px, the last 5 columns should disappear when the window is resized to 600px. Similarly, when the window is resized to 800px, the last 3 columns should be hidden.

Currently, I am able to hide columns using CSS with display:none on the :nth-child selector. However, this method does not check if the column is already hidden to move to the n-1 child.

Is there a CSS solution for this issue, or would it require Javascript? If Javascript is necessary, how can this be achieved?

Your help is appreciated. Thank you.

javascriptjqueryhtmlcss

Answer №1

http://jsfiddle.net/tcvB6/1/ Check out this solution. It provides a way to handle screen size changes with a function that wraps tables in divs for better CSS styling. You can continually update it by adding a few modifications. Here's the function I included:

$("table").each(function(){
    var $table = $(this);
    while ($table.outerWidth() > $("#wrapOuter").outerWidth()) {
        $table.find("tr").each(function(){
            $(this).find("td:visible, th:visible").last().hide();
        });
    }
});

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

Access nested JSON data through the use of a datatable

I have been attempting to find a solution, but I keep encountering errors. Can someone please assist me? Here is the JSON data: { "siteList": [ { "siteName": "Site1", "deviceList": [ { &quo ...

jquery

Optimal approach for verifying the POST request payload

My RESTful API has a POST endpoint for user creation, and I am looking to implement data validation before inserting it into the database. There are two approaches I'm considering: Approach 1: Incorporating model validation in the controller and repe ...

javascriptnode.jsexpressmiddleware

Ways to activate a function using jQuery

I have implemented a textbox for collecting usernames and passwords. Once the user enters their name in the name text box, the password text box should become visible. However, when the form is submitted and the user clicks on the name text box, all previ ...

jqueryautocomplete

What causes variations in running identical code between the Node environment and the Chrome console?

let myName = "World"; function functionA() { let myName = "FunctionA"; return function() { console.log(this.myName); } } functionA()(); Executing the code above in my terminal with node results in undefined, while running it in Chrom ...

javascriptnode.jsgoogle-chromescope

Error message displayed: "An error occurred while processing the VueJS InertiaJS Uncaught (in promise) TypeError. It seems that the property 'search'

Currently, I am working on a Vue JS project with Inertia. One of the features I am implementing is a list that allows users to filter by name. data() { return { selectedUser: this.value, selected: null, search: & ...

javascriptlaravelvue.jsinertiajs

Scraping an unbalanced HTML document using Beautiful Soup 4

While working with html files, I often come across partial files that have unbalanced html tags. For instance, there might be a missing <title> tag in the first line of this partial html file. Despite this issue, I wonder if Beautiful Soup can still ...

pythonhtmlbeautifulsoup

Download personalized HTML design

Situation When exporting to HTML, the resulting code appears as follows: <html> <head> <title></title> <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"> <style type="text/css" ...

htmljasper-reportsexport

React Native's 'onMessage' feature is currently experiencing issues and is not functioning

I'm attempting to retrieve the content of a URL by sending a post message and then listening for it using onMessage, but unfortunately it does not seem to be functioning properly. render(){ const getHtmlJS = "window.postMessage(document.getElementsBy ...

javascriptreact-native

Does the entire window fade before the URL is loaded?

Is it feasible for me to create an effect where, upon a user clicking on a link, the entire window fades out (perhaps with a black div covering it), and then loads an external URL like 'google'? For example: User clicks 'Here', and th ...

javascriptjqueryhtmlcssfade

Implementing jQuery .load to effectively extract the Title tag from HTML code

I am currently utilizing .load to fetch and load pages, as well as modify their window titles. The page loads successfully; however, the main issue I am facing is my inability to extract the title from the HTML code present in the response. Below is the c ...

jqueryhtml

Accessing Flipkart API using CORS: A step-by-step guide

Trying to retrieve data from the following URL using a jQuery ajax call: Ajax request $.ajax({ type:"GET", url: 'https://affiliate-api.flipkart.net/affiliate/report/orders/detail/xml?startDate=2015-05-01&amp;endDate=2015-05-30&amp;st ...

jqueryajaxcors

Is it possible that using jQuery does not allow for animating CSS value left and opacity?

Trying to make the code animate opacity as well, but facing some challenges. <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title></title> ...

jqueryjquery-animate

Upon migrating from Vue CLI 2 to 3, an error is thrown stating: "Cannot locate element: #app" and an empty body is

Currently, I am in the process of transitioning my VueJS project from VueCLI 2 to version 3. After moving all the necessary files to the src folder, I attempted to view it in the browser by running npm run serve. However, I encountered a problem where the ...

javascripthtmlvue.jsvue-cli

Observable not defined in facade pattern with RxJS

(After taking Gunnar's advice, I'm updating my question) @Gunnar.B Tool for integrating with API @Injectable({ providedIn: 'root' }) export class ConsolidatedAPI { constructor(private http: HttpClient) { } getInvestments(search?: ...

javascriptangulartypescriptrxjsarchitecture

Having trouble with the line of code right before a $timeout in AngularJS

I am wondering about an issue in my code. vm.showSuccess = true; $timeout(function() { close(); }, 2000); vm.showSuccess = false; Interestingly, the timeout function is executing properly but the first line seems to be ignored. This piece of code is me ...

javascriptangularjstimeout

Utilizing jQuery to Determine Character Count

I've tried everything on the site, but nothing seems to be working. I'm attempting to create a function that triggers when the character count in a div exceeds a certain number, but it's not functioning as expected. Any assistance would be g ...

javascriptjquery

Here, it is possible for the padding-right value to be equal to zero

I am relatively new to CSS and I am currently in the process of testing and experimenting to better understand how it works. For instance, in the code snippet provided, we see that the selector .box h3 has a padding: 6px 10px 4px 10px;. Therefore, the pad ...

css

Executing API call utilizing the Request module within a node.js application

In my node.js app, I have a request call that looks like this: request({ url:chanURL, qs:chanProperties}, function(err, response, body) { if(err) { console.log(err); return; } body = JSON.parse(body); (function (body) { Objec ...

javascriptjsonnode.jsnode-request

Is there a way to display a list of dropdown menu options using Selenium with Python?

I am currently attempting to utilize Selenium Python and its PhantomJS function in order to print out all the items from the first drop-down menu on this particular page (). Unfortunately, I keep encountering a No Attribute error message. If anyone could ...

pythonhtmlseleniumselenium-webdriverweb-crawler

Leveraging a single Axios request across various components

My current setup involves making a simple Axios call in this way: .get('https://myAPI.com/') .then(response => { this.info = response.data }) Subsequently, I utilize a v-for array loop on my components to display the retrieved data. ...

javascriptvue.jsaxios