How to conceal table cells on Safari 5?

My code works on Firefox and IE, but not on Safari. Here's an example:

<table>
<thead>
    <tr>
        <th style="display: none;">hi</th>
       </tr>

</thead>
<tr class="someClass">
    <td style="display: none;"><span>hi</span></td>
</tr>

When I have many columns and rows, all browsers hide this column properly except for Safari. In Safari, a gap is created and the alignment of other columns is affected.

http://gyazo.com/ef5ce5e994abb954aab7069b14699476.png

This is how my column headers appear. Is there something I'm overlooking?

htmlcsssafari

Answer №1

After some trial and error, I finally cracked the code. By moving that column to the end (along with the header), everything appears correctly now.

Answer №2

By applying the CSS property display:none to an element, it effectively removes it from the flow of the document. However, this technique may not be suitable for table cells, as they are closely linked to neighboring elements.

To ensure proper alignment of the table with its adjacent elements, it is necessary to physically remove the unwanted elements rather than simply hiding them.

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

Tips for reducing code length in jQuery

Here's an interesting question that I've been pondering. Is there a more efficient way to optimize and condense code like the one below? Could it be achieved using functions or loops instead of having lengthy jQuery code? var panels = ["panel1", ...

javascriptjqueryhtmlminimize

The span is unresponsive

When focusing on an input or checking its validity, the span should move up but it's not responding to any styles. <div class="login"> <span class="logtxt">Username or email</span> <input type=& ...

htmlcss

Alter the Color of the 'div' According to the Background

At the bottom right of my website, there is a black chatbot icon. The web footer also has a black background. To create a clear contrast, I have decided to change the color of the chatbot to white as users scroll to the bottom of the page. I implemented t ...

javascriptcssangularsassfrontend

Using jquery/offset to position a div causes it to float, but it does not take

<script type="text/javascript"> $(document).ready(function () { var top = $('#rt_outer').offset().top - parseFloat($('#rt_outer').css('marginTop').replace(/auto/, 0)); $(window).scroll(function (event) { // det ...

jqueryhtmlscrollhashmap

What is the method for changing the icon color to dark in Twitter Bootstrap?

I am facing an issue where the icon in my menu tab turns white when active, making it difficult to see. Is there a way to change the color of the icon to black? I have found a class icon-white to make it white, but there is no corresponding class to make ...

csstwitter-bootstrapicons

Struggling to properly position my dropdown menu without causing the div content to shift downward

<div id="header"> <a href="#" id="logo"></a> </div> <div id="nav_cont"> <ul id="nav"> <li id="main_btn"><a class="mainlink" href="#">Parent 01</a></li> <li id="communities_btn">< ...

css

dirpagination fails to display all rows in the dataset

I've been working on creating tables with 3 divs, as shown in the link below:- https://github.com/anirbanmishra/congress.php/blob/master/web_test Additionally, I have a javascript file available here:- https://github.com/anirbanmishra/congress.php/bl ...

javascripthtmlangularjsangularjs-ng-repeatdirpagination

Creating a dynamic rectangular design with a taller height than width, featuring perfectly centered content

My website needs a responsive rectangle where I can easily adjust the height and width. However, when I try to rotate the rectangle, the content also rotates 90 degrees. Can anyone help me with this issue? Thank you in advance for any assistance. Snippet ...

htmlcss

Using just one "nav.php" file for both the homepage and subdirectories

Looking to enhance the efficiency of my websites, I have implemented a PHP file for navigation, footer, sidebar, and other elements. However, this current method involves using two separate files: one for the homepage and another for the remaining pages wi ...

phphtml

When a React CSS class is deployed to a production server, it may be automatically

I've encountered a strange CSS issue while working on my React project. One specific section of the JSX <div> has a class with style properties defined in the main .css file. During local development, everything appears as expected. However, aft ...

javascripthtmlcssreactjsmaterial-ui

Display the GIF when the mouse hovers over it, but ensure it plays just a single time

Is it possible to make a GIF only play once when you hover over it on a website? I want to avoid the animation repeating if the user hovers over it again without refreshing the page. Currently, I have a static image that changes to a gif on mouseover, but ...

htmlcss

The persistent Bulma dropdown glitch that refuses to close

In the project I'm working on, I have implemented a Bulma dropdown. While the dropdown functions correctly, I am facing an issue when adding multiple dropdowns in different columns with backend integration. When one dropdown is open and another is cli ...

javascriptjquerycssdropdownbulma

Elegant Border Separator

I'm attempting to achieve the design below (with a 1 pixel gap on each end): ...

htmlcss

Attempting to create a dynamic grid layout utilizing CSS to ensure optimal responsiveness

I am working on creating a webpage layout similar to the one in the link below: The maximum width for the layout is set to 1600px. However, I am facing challenges in making it fully responsive. This is because all the boxes are given widths in percentages ...

htmlcss

Using an npm package to include CSS styles in a stylesheet

I created an NPM package that includes a CSS file that needs to be included in my main CSS file. In a typical HTML CSS website, I would need to write @import url("./node_modules/web-creative-fonts/index.css") but what I really want is to simplify ...

cssnpmnpm-package

Show the user's username on their profile page by retrieving the name from the database

Upon successful login/signup with various services, I want to display the username on the profile page. However, my database stores user data in different fields depending on the service used - user.twitter.name for Twitter logins, user.google.name for Goo ...

javascriptnode.jshtmlexpress

I do not prefer output as my optimal choice

My preference is to create drill down buttons rather than focusing on output. Currently, the output appears as: The content of index.html is as follows: <html>　 <head> <script type="text/javascript" src="http://ajax.googleapis.com/ ...

javascriptjqueryhtml

Button color changes upon submission of form

Can anyone help me figure out how to change the color of a submit button after a form submission using Twitter Bootstrap 3? I have a form with multiple buttons serving as filters for my product page, but I can't seem to change the color of the selecte ...

javascriptphpjqueryhtmlinput

React fullpage.js causing z-index stacking problems

Take a look at the demo here: I'm having trouble getting the 'more info' modal to display above all other elements on the screen. Here's the desired stacking order, with the highest stacked element listed first: modal nav open header ...

cssreactjsz-indexfullpage.js

What is the best way to prevent a draggable div from moving past the edge of the viewport?

My situation involves a draggable div that functions as a popup window when a specific button is clicked. However, I noticed that dragging the div to the end of the viewport allows me to drag it out of the visible area, causing the body of the page to expa ...

javascripthtml