CodexBloom - Programming Q&A Platform

HTML <table> not respecting cell padding in Firefox 120 when using CSS Grid layout

👀 Views: 0 💬 Answers: 1 📅 Created: 2025-08-06
html css firefox HTML/CSS

I'm collaborating on a project where I'm experiencing an scenario with an HTML `<table>` where the cell padding is not being respected in Firefox 120 when the table is placed inside a CSS Grid layout... The padding I've specified in my CSS seems to be ignored, leading to a layout that looks broken. Here’s a simplified version of my code: ```html <div class="grid-container"> <table class="my-table"> <tr> <td>Cell 1</td> <td>Cell 2</td> </tr> <tr> <td>Cell 3</td> <td>Cell 4</td> </tr> </table> </div> ``` ```css .grid-container { display: grid; grid-template-columns: 1fr 1fr; } .my-table { border-collapse: collapse; width: 100%; } .my-table td { border: 1px solid black; padding: 20px; } ``` In Chrome and Edge, everything looks perfect, but in Firefox, the cells are almost touching each other despite the `20px` padding. I’ve also tried using `border-spacing`, but that seems to have no effect either. I cleared the cache and tried running it in safe mode to eliminate any add-ons, but the scenario continues. Additionally, when I inspect the table with Firefox’s dev tools, I can see that the padding is applied, but it looks like it’s not rendering correctly. Has anyone else faced similar issues with tables inside CSS Grid in recent Firefox versions? Any suggestions on how to fix this would be appreciated! I'm developing on Linux with Html/Css.