Tips for concealing table columns on a mobile screen

I could really use some assistance with a challenging situation. I am currently working on a WordPress website project and using the "Table Maker" plugin to display detailed information in a table format. The desktop view of the table includes 7 columns, as does the mobile version. However, I would like to only display the first 3 columns in the mobile view instead of all 7. Is there a CSS code that can help me achieve this? Any guidance is greatly appreciated as I am still learning. Thank you in advance! URL-

csswordpress

Answer №1

In case the table has a fixed 7 columns, you have the option to utilize CSS for mobile hiding purposes. For example:

@media (max-width:768px){
.table_name tr td:nth-child(4), .table_name tr td:nth-child(5),
.table_name tr td:nth-child(6), .table_name tr td:nth-child(7){
display: none;
}
}

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

Showing a unique image and its corresponding title in a React carousel component when the page loads and when a button is clicked

I am currently developing a slideshow feature in a React component that will display a random image along with its associated title either when the page loads or when the user clicks on the next button within the slideshow. In order to achieve this, I ha ...

javascripthtmlcssreactjs

CLS notifies about an Unrecognized CSS Element in Page Insights' Core Web Performance

My experience with Google PageSpeed Insights has been quite frustrating due to the numerous alerts I'm receiving about Unsupported CSS Properties. The importance of avoiding non-composited animations: Animations that are not composited can appear gli ...

csspagespeedgoogle-pagespeedpagespeed-insightscls

How to delete the right part of a box shadow in CSS

I have a div with a box-shadow applied. I want to remove the right side of the shadow without adding any new code, but by modifying the existing box-shadow property. I attempted using clip-path, but I need it to also work on Internet Explorer. Can you prov ...

htmlcss

Issue with loading HTML file correctly in Django

I have been attempting to integrate my Django app with an admin dashboard from a repository on GitHub. After successfully logging in, the app redirects to the dashboard, but only the HTML part loads and none of the fancy features are visible on the dashboa ...

javascriptpythonhtmlcssdjango

Is it feasible to generate a vertical bar or horizontal graph using Chart.JS?

Is there a way to manipulate Chart.JS to create a horizontal bar chart with percentages displayed along the bottom, similar to this example created using xlsxwriter? View Example UPDATE I marked a certain answer as correct based on the jsfiddle provided ...

jqueryhtmlcsschartschart.js2

"Encountering issue with SCSS variable not being applied to background in file

$enable-grid-classes: false; $enable-cssgrid:true; $deepBlue: #032f3e; body { --bs-body-bg: orange ; } @import "https://fonts.googleapis.com/css2?family=Space+Grotesk:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="463121 ...

htmlcsssassbootstrap-5

implementing a smooth transition effect for image changes upon hover

I've been working on a React project where I created a card that changes its image when hovered over. I wanted to add a smoother transition effect to the image change using transition: opacity 0.25s ease-in-out;, but it doesn't seem to be working ...

javascriptcssreactjscss-transitions

What impact does the addition of wp-blog-header.php have on the file path?

Recently, I've been working on a piece of JavaScript code: <script type="text/javascript"> $('.publish_post').click (function(){ var info = 'some info'; ...

jqueryajaxwordpress

Tips for displaying the product title of an item in the Woocommerce shopping cart

Is there a way for me to display the title of the product in my Woocommerce store's cart on the checkout page? My store only allows one product in the cart at a time, and I want to customize the checkout page to show the product title. I've tri ...

phphtmlcsswordpresswoocommerce

What is the best way to align a submit button and select option in a row within a form using Bootstrap?

I'm having trouble aligning a submit button to the right within a Bootstrap form. I've experimented with float-right, text-right, and align="right", but none of them seem to be working. Below is the code snippet: <!DOCTYPE html& ...

htmlcss

Automatically adjust the height of a React Native view

I am working on a component that consists of three views - one at the top, another in the middle with a specific height, and the last one at the bottom. I want the top and bottom views to adjust their heights accordingly. Although this may seem straightfor ...

javascriptcssreactjsreact-native

How to vertically center content within a container-fluid in Bootstrap 4

I'm currently working on vertically aligning the two rows within the container-fluid. They are already aligned horizontally, but I want to center them on the screen. <!DOCTYPE html> <html lang="en"> <head> <! ...

cssbootstrap-4

How can I make a Bootstrap 5 container adjust to the height of the screen?

I am currently working with Bootstrap 5 and facing an issue while displaying a calendar on the screen. The height of the container appears to be around 25% longer than the screen height. I have tried setting the height to "100%" and "80%" in the CSS, but i ...

htmlcssbootstrap-5

CSS Tutorial: Creating a Dynamic Gradient Bar

I am looking to create a dynamic colored bar with a moving color gradient effect. Without using JavaScript, I want to achieve this effect using CSS 3 properties such as gradients and animations. This is a snippet of what I have tried so far: HTML: <b ...

htmlcss

Hover over the text below to see an image appear in its place

I'm looking to swap out some text with an image when hovering over it, using basic HTML/CSS. NO: show the image below the text NO: display the text on top of the image NO: replace one image with another YES: replace the text with an image ...

htmlcss

Determining parent height through the positioning of children

When it comes to CSS, it's truly fascinating until you hit a roadblock and the "aha moment" seems elusive. Today, I'm struggling with adjusting the height of my parent div that contains a relatively positioned element. The issue arises from the ...

htmlcsscss-position

Play button icon is missing in Firefox when using absolute positioning

I'm currently experiencing an issue with my video gallery section. I have both normal and hover versions of a play button positioned above a preview image of a video. However, the play buttons are not visible at all in Firefox. You can view the page h ...

csscss-position

Position the select tag adjacent to the textbox

Looking for assistance on how to arrange the <select> tag beside the "Desired Email Address" field within my email registration form. I believe a modification to the CSS code is necessary. Below you will find the HTML and CSS (snippet) related to th ...

htmlcss

Guide on inserting a virtual post into your system without actually saving it in the database

I have a WordPress blog and I am looking to display a post without storing it in the database. Essentially, what I want to achieve is this: Upon loading the page, I would like to dynamically generate a post and prepend it to the homepage. I have explored ...

phpwordpresspost

The concept of CSS inheritance within div elements

I've been researching extensively about the concept of CSS inheritance, but I have come across a puzzling question that remains unanswered. Consider the code snippet below: <!DOCTYPE HTML> <html> <head> <style type="text/css"> ...

csshtmlinheritance