What could be the reason for Firefox failing to display the border of a table when the tbody is

If Firefox isn't displaying table cell borders correctly in the presence of an empty tbody, a simple solution is to use the pseudo selector tbody:empty {display:none;} to hide the empty tbody element. This will ensure that everything is rendered as expected.

For a demonstration and code examples, check out this jsfiddle

table {
    border-collapse: collapse;
}
th,
td {
    border: 1px solid #000;
}

.fixed tbody:empty {
    display: none;
}
<table class="broken">
    <thead>
        <tr>
            <th>1</th>
            <td>2</td>
            <td>3</td>
        </tr>
    </thead>
    <tbody></tbody>
    <tfoot>
        <tr>
            <th>1</th>
            <td>2</td>
            <td>3</td>
        </tr>
    </tfoot>
</table>

<hr />

<table class="fixed">
    <thead>
        <tr>
            <th>1</th>
            <td>2</td>
            <td>3</td>
        </tr>
    </thead>
    <tbody></tbody>
    <tfoot>
        <tr>
            <th>1</th>
            <td>2</td>
            <td>3</td>
        </tr>
    </tfoot>
</table>

Answer №1

These issues are likely related to Bug 409254 and Bug 217769 within Firefox.

On a side note, while an empty tbody is permissible in HTML 5, the number of cells in each row group should typically match (unless using colspan) in a table.

A possible workaround involves drawing borders separately on both the table and cell elements.

table {
    border-collapse: separate; /*changed from collapse*/
    border-spacing: 0;
    border: 1px solid;
    border-width: 0 0 1px 1px; /*draw bottom and left borders*/
}
th,
td {
    border: 1px solid;
    border-width: 1px 1px 0 0; /*draw top and right borders*/
}

Check out the jsfiddle demonstration here.

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

The div element moves to the right as soon as the drop-down menu pops up

Currently, I am facing an issue with aligning an image inside a div that is centered in an outer-wrapper. The outer-wrapper contains a horizontal menu at the top with 5 sub divs displayed inline. I have implemented CSS for a drop-down menu that appears whe ...

Discover the secrets to replicating the mesmerizing horizontal scrolling menu akin to the

What is the most effective way to create a horizontal menu similar to the innovative Google picture menu? Could someone kindly share their knowledge and provide the code for achieving the same outcome? ...

Every time I adjust the browser height on my landing page, the elements start to overlap each other

Something strange is happening - as I shorten the height of the browser, elements on the page start to overlap. I've tried using Firebug to troubleshoot, but haven't had any luck so far. Maybe someone here can help me out! EDIT: It seems that e ...

Unable to modify SVG color to a white hue

I am currently working on an Angular project where I am utilizing SVG to display some icons. These icons originally have a default grey color, but I want them to change to white when hovered over. Interestingly, while changing the color to red, green, or y ...

What is the method for implementing right/left text ellipses on flexed buttons that span the entire viewport width using CSS?

I currently have the following code: .viewport { width: 300px; } .container { --color-dark: rgb(40, 40, 40); --color-light: rgb(255, 255, 255); --color-base-background: rgb(255, 255, 255); ... <div class="viewport"> <di ...

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 ...

The `overflow:auto` property is causing the flex container to overflow due to the size of its fixed width children

Here's a unique CSS puzzle for you all: Imagine the following hierarchy: app container flex container item1 - fixed width(80px) item2 - responsive width(width:100%). MUI Stepper - overflow:scroll, width:100% This structure would look like this: ...

Creating expandable card components with React and CSS using accordion functionality

I am currently working on creating a card that will expand its blue footer when the "view details" link is clicked to show lorem text. However, I am encountering an issue where the blue bottom of the card does not expand along with the lorem text. You can ...

Switch from flexbox layout to begin on the next column within the same row

I am attempting to create a CSS layout where, after a specific element like :nth-child(6), the elements will break and form a separate column within the same row. The parent element should split into 2 columns after every 6th element in the same row, then ...

Troubleshooting Symfony2 and Assetic: Why are my CSS-linked images not loading?

I've encountered an issue with my CSS sprite sheet that my CSS file seems unable to locate the image. Despite following the provided solution here, I'm still facing the same problem. The directory structure of my bundle is as follows: src/ v ...

Several radial progress charts in JavaScript

While attempting to recreate and update this chart, I successfully created a separate chart but encountered difficulties with achieving the second progress. The secondary chart <div id="radial-progress-vha"> <div class="circle-vha ...

Positioning icon/image beside the input box

Currently, I have a form with two buttons in a row and an icon (paper clip) that I am attempting to align next to the buttons using UIKit. However, I am facing challenges in getting the alignment right without affecting the size of the elements. Below is a ...

Having trouble rendering components due to conflicts between React Router and Semantic UI React

Below is the code in my App.js: import { useRecoilValue } from 'recoil'; import { authState } from './atoms/authAtom'; import { ToastContainer } from 'react-toastify'; import { ProtectedRoute } from './layout/ProtectedRou ...

Can a Textmate snippet be activated using a Regex pattern instead of just a specific character?

Hey there, I've been spending a lot of time working with CSS recently, and I have to admit that constantly typing "px" after every width, height, margin, etc., is starting to get on my nerves. I find myself refining pixel values in Firebug quite ofte ...

Adjust the size and position of the text input field

I'm struggling to find a way to both resize and move the box without one action interfering with the other. Whenever I attempt to change the size of the box, it triggers the move event at the same time. Clicking on the box should make it resizable, bu ...

flawless approach to showcasing visual content

I am a beginner in css. My goal is to showcase my images in an optimal way This is the HTML code I have: <div id="photos"> <h3>Title of the Photo</h3> <P class="like"><a href="#">Give it a Like</a& ...

Creating a Delicious Earth Progress Pie

I'm looking to incorporate a unique progress bar design on my website, similar to this one: The progress pie Can anyone guide me on how to create a progress pie with an image inside it that changes color as it moves? ...

The issue with the JQuery Cookie Plugin is that it is unable to function properly due to the

Although I know there are many similar questions out there, please bear with me. I am not as proficient in JQuery as I am with HTML/CSS, and this is my first time using cookies. On my website, I have a green banner that should disappear when the user click ...

Is the 3D cube spinning with a slight perspective glitch?

I've successfully created a spinning cube using html and css. However, I'm facing an issue where pressing the up and down arrow keys causes the cube to rotate in a larger space rather than around its center. I've attempted using margin: 0 a ...

Enter the Kannada language into the HTML text box or input field

My html form consists of about 15 - 20 input and textarea fields. As a user, how can I enter information in Kannda or any other local language? https://i.stack.imgur.com/60PVT.png ...