HTML Table Not Rendering Properly with CSS Grid in Chrome 117 - Alignment Issues
I just started working with I'm working with an scenario where my HTML table, which I am trying to style using CSS Grid, is not rendering properly in Chrome 117... The cells appear misaligned, and the layout looks completely off compared to Firefox and Safari. Here is the relevant piece of code: ```html <table class="grid-table"> <thead> <tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> </tr> </thead> <tbody> <tr> <td>Row 1, Cell 1</td> <td>Row 1, Cell 2</td> <td>Row 1, Cell 3</td> </tr> <tr> <td>Row 2, Cell 1</td> <td>Row 2, Cell 2</td> <td>Row 2, Cell 3</td> </tr> </tbody> </table> ``` And here’s the accompanying CSS: ```css .grid-table { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .grid-table th, .grid-table td { border: 1px solid #ccc; padding: 8px; text-align: left; } ``` In Firefox and Safari, everything aligns perfectly, but in Chrome, the second row’s cells are wider than the first row’s cells, causing a misalignment. I’ve tried using `box-sizing: border-box;` on the table and its cells, but the scenario continues. I also attempted to apply specific widths to the columns, but that only made things more inconsistent. I checked for any potential CSS conflicts or overrides, but nothing seems to be the culprit. Can anyone guide to identify what's going wrong in Chrome? Is there a known scenario with CSS Grid and tables, or could there be a potential bug in this specific version? For context: I'm using Html on Windows. Any suggestions would be helpful.