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

Various objects are becoming engaged and chosen instead of a single item being focused on

In my React application, I have integrated a searchable Semantic UI dropdown. The issue I am encountering is that when I select an item by typing in the search field, the element matching the search text gets the class "active" and the element at the index ...

htmlcssreactjsreact-reduxsemantic-ui-react

Ways to conceal an HTML checkbox while displaying its accompanying label

Recently delving into jQuery, I have been exploring how to utilize the jQuery-ui Selectable component as a substitute for checkboxes. http://jqueryui.com/demos/selectable/ I believe I may be able to achieve this if I can discover a method to conceal the ...

jqueryhtmlcheckboxjquery-ui-selectable

SQL injection for storing hidden dates

When I submit a value using my form, I want the date to be saved in the MySQL database. The user does not need to see it, but I need the dates for a future function where I can loop through the registered dates in the database. Do I need to create a hidde ...

htmldatemysqli

Sticky footer with overlapping DIV

I am working on a container with three nested divs: header, content, and footer <div class="note"> <div class="header">Title</div> <div class="content" contenteditable="true">Some content</div> <div class="fo ...

htmlcss

Having trouble with bootstrap carousel malfunctioning on Firefox browser?

I'm experiencing an issue with the carousel slider on my website. It seems to only be working in Chrome and not in Mozilla Firefox. You can view the live site at: Below is the code I have used for the carousel: <header id="myCarousel" class="car ...

javascriptjquerycsstwitter-bootstrap

How to Navigate Downward with the Arrow Key in Python Selenium on a Mac Operating System

I am attempting to access a Drop-Down Menu on a website and choose a specific value. I am not sure how to click on an item within a Drop-Down Menu, so my idea was to instruct the WebDriver to use the Arrow-Down Key multiple times before pressing the ENTER/ ...

pythonhtmlseleniumselenium-webdriverselenium-chromedriver

PHP overall outcome

I have created a form that includes checkboxes, but I am facing difficulty in calculating the total result based on the selections. Ideally, if a user selects three checkboxes, the total should be $3, and if only one checkbox is selected, the total should ...

phphtml

The div element is not expanding as expected, causing the content to overlap

In my code, I have a portfolio-container div with two images and paragraphs inside a list element. The issue I'm facing is that the div is not expanding vertically, causing the images and paragraphs to overlap with the footer below. I've attempte ...

htmlcss

Is there a way to retrieve the href attribute from an <a> tag using PHP?

Similar Question: Retrieving the href attribute of an Anchor Element Provided hyperlink $link="<a href='test.php'>test</a>"; Is there a way to extract href and anchor text using PHP? ...

phphtml

Switch from hover effects to CSS3 animations triggered on page load

I found this code snippet on https://codepen.io/chriscoyier/pen/NWNJpdJ. Can someone help me modify it to change the counter on page load instead of hover? Also, I want the counter to stop at 100 without resetting back to 0. @property --num { syntax: ...

htmlcss

Divide data into an HTML table and merge it with header information

My HTML form contains an interactive HTML table where users can add/delete rows. I am sending this data to a Google Sheet and need to store the row information with corresponding header details. Each time a user submits the form, a new row is added to the ...

javascriptjqueryhtmlajaxgoogle-apps-script

Issue with loading scripts in CodeIgniter, jQuery Mobile, and jQuery UI - scripts are not loading initially, requires a refresh to

I am currently facing issues with my codeigniter application. The problem arises when I have a view/form (view 1) that, upon submission, loads another view (view 2). When view 1 is initially loaded, it does not load the correct JavaScript and CSS. Instead ...

jquerycsscodeigniterjquery-mobileview

Learn how to utilize AngularJS Material to toggle the enable/disable functionality of a checkbox

Can someone assist me in enabling and disabling the checkbox as shown in the attachment image https://i.stack.imgur.com/l6g1C.jpg View the PLNKR angular.module('BlankApp', ['ngMaterial']) .config(['$mdThemingProvider', fun ...

cssangularjshtmlangularjs-material

Are there any resources available to ensure my jQuery script is compatible with multiple browsers?

After realizing that Internet Explorer does not support certain selectors in jQuery, I began to question how to ensure my code will function properly during the writing process. As a Linux user, my testing options are limited to Chrome and Firefox. Is ther ...

javascriptjquerycssjquery-selectorscross-browser

Choose either immediate offspring or immediate offspring of immediate offspring

I am struggling to create a CSS Selector that follows DRY principles. The selector needs to target elements within a group but not those within a subgroup of the main group. Elements should only be direct children of the main group or wrapped in an addit ...

javascripthtmlcss

Expanding iframe elements

I am having difficulty adjusting the size of the iframe content (within a fixed-sized iframe). Essentially, I would like the content to scale smaller or larger as if the browser's zoom function was being used. Through my CSS experiments, it seems achi ...

javascriptcssiframe

Combine linear and radial background effects in CSS styling

I am trying to achieve a background design that includes both linear and radial gradients. The linear gradient should display a transition from blue to white, while the radial gradient should overlay a polka dot pattern on top of it. I have been following ...

htmlcssbackgroundlinear-gradientsradial-gradients

Ways to Retrieve the Index of Elements in the DOM Array Generated by the querySelectorAll() Function in JavaScript

const items = document.querySelectoAll('.class') console.log(items) // Array with 15 elements (This array contains a total of 15 elements) ...

javascripthtmlnode.jsreactjsjson

Pick out grouped objects without the use of Javascript

I am looking to design a single page where the display of categorized items changes based on user selection. Ideally, I want this to be chapter/hash (:target) dependent, but checkboxes influencing state would also work. As an experiment, I am trying to ac ...

htmlcss

Is the textarea's shape out of the ordinary?

Most textareas are typically rectangular or square in shape, similar to this: However, I am interested in having a custom-shaped textarea, like the example below: Is it feasible to achieve? ...

javascriptjqueryhtmlcss