How come "display:none" is still occupying space on the page?

Trying to figure out how to make a specific cell in a table disappear when viewing an HTML page on mobile devices, while having a width of 20% for desktop. However, the issue is that even though the table cell is invisible on mobile, it still occupies space. I have come across various solutions online mentioning that 'display:none' should not take up space, but so far, I haven't been able to achieve that result.

This cell should be 20% wide on desktop but invisible on mobile. This cell should be 60% wide on desktop and 100% wide on mobile. This cell should be 20% wide on desktop but invisible on mobile.
htmlcss

Answer №1

The code you have written is not valid. In this context, a block element like <div> cannot be nested within a <tr> tag. The only valid elements to use here are <td> and <th>.

When viewed in Google Chrome, the <div> elements are incorrectly placed at the top level of the document body instead of within the table structure.

<div class="mobileHide"></div>
<div class="mobileHide"></div>
<table>
  <tr>
    <td>
      This cell is supposed to be 20% wide on desktop but hidden on mobile.
    </td>
    <td>
      This cell is supposed to be 60% wide on desktop and 100% wide on mobile.
    </td>
    <td>
      This cell is supposed to be 20% wide on desktop but hidden on mobile.
    </td>
  </tr>
</table>

If you need to hide table cells on mobile devices, assign the mobileHide class directly to the table cells themselves.

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

Creating stunning visuals with the power of SVG

I need to create a graphics editor similar to Paint using SVG for a school project. I have JavaScript code for drawing shapes like circles and lines, but when I try to add them to an onClick function for a button, it doesn't seem to be working. funct ...

javascripthtmlcsssvg

Is there a way to have a border specifically on the top side?

Is there a way to have the border show up only on the top when hovering over it? Here's the current code I'm using: a:hover { border-top: 3px white; border-style: solid; } Even though this code is in place, the border still appears on ...

cssborder

What is the best way to display a chosen item in a text input field?

https://i.stack.imgur.com/Qe5Ds.png Looking to create a similar design, but lacking the necessary expertise. What steps should I take or what is the specific term for this style? Seeking assistance in implementing this using jQuery, PHP, or JavaScript. A ...

javascriptphpjqueryhtml

The directive for Content Security Policy in Django framework

I am having trouble importing font-awesome into my application. I've tried the following code: <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"> However, this is causing an err ...

cssdjangogoogle-app-engine

Is it possible to move a directive within a limited parent element?

Is there a way to limit the movement of an angular.js drag directive within the confines of its parent element? You can see the problem I'm facing in this jsbin: http://jsbin.com/maxife/3/edit?html,css,js,output ...

javascripthtmlcssangularjsangularjs-directive

Adjust the color of the navbar only after a user scrolls, with a slight delay rather than

My code changes the navbar colors when I scroll (200ms). However, I would like the changes to occur when I am slightly above the next section, not immediately. In other words, what adjustments should I make to change the color in the next section and not ...

javascriptjquerycssscrollnavbar

What could be causing ReactNative Dimensions component to display lower resolutions?

Currently, I am developing an application using React Native v0.45.1 and testing it on my S6 device. Despite setting a background image that matches the resolution of my phone, it appears excessively large on the screen, cutting off most of the content. T ...

androidcssreactjsreact-nativebackground

How can jQuery help me load a lengthy webpage with various backgrounds that change according to the vertical scroll value?

I have been given a design that is 960px wide and approximately 7000px tall, divided into five segments stacked vertically at random points. There is a fixed sidebar that scrolls to each segment when a navigation link is clicked. The layout includes slider ...

javascriptjqueryhtmljquery-pluginslazy-loading

Incorporate a new CSS class into a DIV using JavaScript

Sample HTML: <div id="bar" class="style_one"></div> Is there a way to include the class style_two without deleting style_one? final outcome: <div id="bar" class="style_one style_two"></div> ...

javascripthtmlcss

Expanding CSS styles on hover

When my mouse pointer moves out of the red color box, it still triggers the hover function. However, I only want the hover effect to work within the red color box and hide the menu when it's outside the box. This is the source code from JSfiddle: htt ...

csshover

Ways to append each list item from one unordered list to the end of another based on their unique styles

I am in the process of making a website responsive and I am faced with the task of combining two different menus. In order to achieve this, I need to transfer all list items (li) from one unordered list (ul) to another. Provided below is a simplified vers ...

javascriptjqueryhtmlcss

The information about the property is not appearing on the screen

I included the following CSS: nav label:AFTER { content: " ▾"; } However, when viewed in Chrome, it appears like this: content: " â–¾"; I have already added <meta charset="utf-8"/> to my JSP page and @CHARSET "utf-8"; in my CSS file. ...

cssspring-mvc

Parsing JSON data repeatedly using JavaScript within an HTML environment

The following code I found on a popular web development website works perfectly: <!DOCTYPE html> <html> <body> <h1>Customers</h1> <div id="id01"></div> <script> var xmlhttp = new XMLHttpRequest(); var url ...

javascripthtmljson

Submitting a form and using Ajax to upload an image

Is there a way to submit an image file to php using ajax without assigning the file to a variable with onchange event? I've tried triggering the request on submit click, but keep getting the error message: "cannot read property 0 of undefined." <ht ...

javascriptjqueryhtmlajax

What is the best way to specify the border color of a fieldset?

Is there a way to set the border color of a fieldset while removing the default border color? I have tried using a class but it doesn't seem to work as expected. How can I achieve setting the border color for the fieldset? <fieldset class="field_s ...

htmlcssborder

What are the steps to create a scrolling effect for the menu buttons on the mobile version of

When accessing the mobile version of Facebook on a handheld device, you will notice a menu with various options like "About," "Photos," "Friends," "Subscriptions," "Map," and more. This menu is designed to be slideable on your mobile device. Using HTML, ...

htmlcssjquery-mobilecss-float

JavaScript is restricted from being accessed beyond the confines of the ui-view element

After coming across a problem similar to one previously dismissed on stack overflow, I decided to tackle it head-on. You can find the issue and attempted solutions at this link: Previous Problem and Solutions The full project solution is available on Gith ...

htmlangularjs

PHPBB authentication system

After experimenting with the script based on the guidance I received from you all, I've encountered another issue. When I click 'login' on the login form, it displays this message: The page isn't redirecting properly. Firefox has detect ...

phpmysqlhtmlauthentication

Generating a dynamic triangle within a div while ensuring it fits perfectly with the maximum width

I need help with creating a responsive triangle on a web page that takes three inputs. The challenge is to adjust the size of the triangle so it fits inside a div element while maintaining the aspect ratio of the inputs. For instance, if the inputs are 500 ...

javascriptjquerycssresponsive-designgeometry

How can I efficiently verify page references using tools like CSS, JavaScript, and more?

I have Firebug (my team lacks Firefox) and the IE developer toolbar (IE7), but I'm struggling to easily validate if the referenced files in a page are loading. I see Javascript errors, but they don't lead me directly to the exact file in the hier ...

htmldebugging