Occupying room while using display: none in <td>

As a newcomer to media queries and .net, I find myself struggling with the code below. At max-width 775px, my goal is to have the first td disappear completely and be replaced by the second td. However, it seems that while the first td becomes 'invisible,' it still takes up space. The borders are there as visual guides.

@media screen and (min-width:776px) {
  .hidey {
    border: 1px solid blue;
  }
  .hidey2 {
    display: none;
    border: 1px dashed red;
  }
}
@media screen and (max-width:775px) {
  .hidey {
    border: 1px dashed blue;
    display: none;
  }
  .hidey2 {
    border: 1px solid red;
  }
}
<table>
  <tr>
    <th>Blah:</th>
    <td class="hidey" style="width: 20em; "><span>td one</span>
    </td>
    <td class="hidey2" style="width: 20em;"><span>td two</span>
    </td>
  </tr>
</table>

View 1

View 2, with unwanted space

Answer №1

Markup and Syntax Error Detected

Your markup seems to be invalid due to the following reasons:

  • You have used @@media instead of @media to preface your media queries, which is incorrect in most cases (except for escaping in ASP.NET Razor View).
  • You are closing </span> tags within <td> elements without any corresponding opening <span> tags, which is also considered invalid.

You may also consider consolidating your queries like this:

@media screen and (min-width:776px) {
  .hidey { border: 1px solid blue; }
  .hidey2 { display: none; border: 1px dashed red; }
}
@media screen and (max-width:775px) {
  .hidey { border: 1px dashed blue; display: none; }
  .hidey2 { border: 1px solid red; }
}

Example Scenario

The provided example code appears to function correctly, even when tested in an MVC Razor View environment as demonstrated in this interactive example:

https://i.sstatic.net/wjGP3.gif

@media screen and (min-width:776px) {
  .hidey { border: 1px solid blue; }
  .hidey2 { display: none; border: 1px dashed red; }
}
@media screen and (max-width:775px) {
  .hidey { border: 1px dashed blue; display: none; }
  .hidey2 { border: 1px solid red; }
}
<table>
  <tr>
    <th>Blah:</th>
    <td class="hidey" style="width: 20em;"><span>td one</span></td>
    <td class="hidey2" style="width: 20em;"><span>td two</span></td>
  </tr>
</table>

Answer №2

<style>
    @media only screen {
        .hide-element1 {
            display: none;
        }
        .hide-element2 {
            display: table;
        }
    }

    @media only screen and (min-width: 775px) {
        .hide-element1 {
            display: table;
        }
        .hide-element2 {
            display: none;
        }
    }
</style>  

<table>
    <tr>
        <td class="hide-element1">First Table Data</td>
        <td class="hide-element2">Second Table Data</td>
    </tr>
</table>

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

Inheritance in SASS - excluding the parent class

Can I apply this syntax to inherit a class in SASS? Code .message { border: 1px solid #ccc; padding: 10px; color: #333; } .success { @extend .message; border-color: green; } Output .message, .success, .error, .warning { border: 1px solid # ...

Individuals have the capability to utilize .php as an image extension

It seems that someone is able to use any type of extension as long as they add .png at the end of the link. is currently being used, causing users on my website to log out when visiting the homepage. I tried to stop this issue, but unfortunately, my sol ...

Changing the appearance of a shadow root element using CSS styling

My CustomField has a FormLayout inside, and I want to change the #layout element within the shadow-root. While it can be done with JavaScript: document.querySelector("#myid > vaadin-form-layout") .shadowRoot .querySelector("#layout" ...

When resizing an anchor tag with a percentage in CSS, the child image width may not scale accordingly

In short, I have multiple draggable images on a map enclosed in anchor tags (<a><img></a>) to enable keyboard dragging. The original image sizes vary, but they are all too large, so I reduced them to 20% of their original sizes using the ...

``It seems like the Tailwind background image is not appearing on

The issue lies in the background image not displaying despite trying different methods such as using ""bg-[url('/image/example.jpeg')"" tailwind.config.js theme: { extend: { colors: { darkBlue: "#0 ...

Enhancing WordPress Menus with Icons in PHP

Is there a way to customize the HTML output of a menu created with wp_nav_menu()? I want to include < i > tags within the link < a > of each < li > item in the menu. I understand that I could achieve this using background-images in the C ...

Error in saving webpage as HTML

I have integrated FileSaver.js into my project to enable users to save web pages as HTML. The code below is triggered when a user clicks on the download button: var originalstr=$.ajax( { type: "GET", url:"url", async: false }).resp ...

"Trouble arises when event listener fails to function following an append operation

Recently, I delved into the world of HTML/CSS and jQuery in an attempt to create a simple web game. Below is a snippet of my HTML code: function playGame() { var theLine = "<div id = \"line\">"; for (var i = 0; i < 9; ...

The border-radius property in Bootstrap buttons causes unwanted white border artifacts to appear

Strange anomalies in the borders of my Bootstrap buttons caught my attention recently. Upon further investigation, I realized that this issue is not linked to my custom styles or theme, as the artifacts can also be seen on the Bootstrap button documentatio ...

Issue with Angular date field not displaying invalid input when form is submitted

I am encountering an issue with my simple form that contains only one date control. Whenever I input an invalid date like 30-Feb-2018, the control becomes invalid and my CSS style triggers a red border to indicate the error. The problem arises when the us ...

PHP data is not displayed by Ajax

I seem to be encountering a bit of trouble. I am attempting to utilize ajax to retrieve data from a PHP server, which in turn fetches it from a MySQL database, and then display it within a specific HTML tag location. However, for some unknown reason, nothi ...

Why Isn't the Element Replicating?

I've been working on a simple comment script that allows users to input their name and message, click submit, and have their comment displayed on the page like YouTube. My plan was to use a prebuilt HTML div and clone it for each new comment, adjustin ...

Adding JSON objects to an HTML body with pure JavaScript - no need for jQuery!

I have my website content stored in a 'content.json' file, resulting in an empty body in my HTML index. Currently, I am able to console.log all the elements from 'script.js' and view all the divs declared in 'content.json' wit ...

The issue of HTML5 audio not working when played multiple times on an Android 4.0.4 device's Native Browser

Currently engaged in a project utilizing HTML5 technology. Encountering an issue with playing the same audio file multiple times on the same page using the Android native browser. The problem is specifically observed on Android ICS 4.0.4. In this version, ...

Implementing Bootstrap in Wordpress using functions.php

The code snippet below is stored in my functions.php file within a Child theme directory. <?php function theme_styles() { wp_enqueue_style( 'bootstrap_css', get_template_directory_uri() . '/bootstrap.min.css' ); wp_enqueue_ ...

Are font classifications determined by the operating system of the viewer or the web browser of the viewer

One thing I've observed is that Google Fonts never uses "fantasy" as a fallback class in the font-family. Instead, they utilize "cursive" for all script and typical fantasy fonts. Could this be a subtle indication that Chrome does not support "fantas ...

Why is it that using div with a 100% width doesn't behave as one would anticipate?

Learning CSS has been an interesting journey so far. It's not always as intuitive as one might think, especially in web development. :) I recently attempted to create a simple, static progress bar using the following HTML file: <html> <he ...

Transferring HTML variables to CSS

I've been searching for an answer without much luck. Is it possible to transfer variables from HTML to CSS, maybe using data attributes? I want to display different backgrounds based on vendors using media queries on brand pages. I know inline CSS d ...

Child element does not follow z-index rules

I have a website Suoi Hong Resort However, the menu block displays behind the logo. The navigation class has a position of absolute and a z-index of 3. The logo has a position of absolute and a z-index of 2. The menu block has a z-index of 10. Despite th ...

Using jQuery to Validate Input Text Control Depending on Radio Selection

How can I ensure that the input text linked to the selected radio option is filled in? For instance, in the example above: If Contact 1's Email radio option is chosen, the Email text field for Contact 1 must not be empty, while the Phone and US Mai ...