Difficulty maintaining consistent line widths while setting up a CSS border grid on a table

What is the most effective method for creating a table with a 1px grid (internal and external)? Could it be possible that Chrome and Edge have issues with borders in certain scenarios?

On this Codeply example, the standard approach is taken - setting border-right and border-bottom on the table, and border-top and border-left on td,th. However, this method doesn't yield consistent results. It appears fine on Android and Firefox (HD/1080 on Windows, UHD/4K on Linux), but has flaws on Edge and Chrome (on both Windows and Linux) where some internal and external borders appear as 2px thick.

I must admit that I am not alone in facing this challenge. There are numerous similar queries online, yet achieving browser consistency seems to be a struggle. Take this SO answer, for instance, which includes a jsFiddle demonstrating varying visuals on Firefox (108.0.2) and Chrome (108.0.5359.125). In the Chrome version, the top and bottom vertical lines appear double-width, while the middle line is single-width. The presentation in Firefox is more desirable in comparison.

htmlcsshtml-table

Answer №1

Issues with scaling 1px borders in Chrome and Edge.

While Firefox seems unaffected, users on Win10 and Win11 may encounter problems with 1px borders when display scaling is not at 100%. Borders can sometimes appear thinner or wider than intended, leading to inconsistencies in design. To address this, setting borders to 0.1px can provide a solution. Check out this Codeply example for the corrected version that displays properly on various platforms:

  • Win 10 UHD/4K at 150% display scale - Firefox, Chrome, Edge
  • Win 11 HD/1080 at 125% display scale - Firefox, Chrome, Edge
  • Android
  • Ubuntu 22 with Firefox and Chromium

Note: Display scaling behavior may vary in Ubuntu, and viewing results on Win10 via VNC could impact accuracy.

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

Transforming a traditional HTML/CSS/JS website into a cutting-edge React application using Tailwind CSS styling

I have a unique website template complete with HTML, CSS, and all necessary assets. Now, I am looking to develop a React JS application using this template. Firstly, I am wondering: Since I typically use Tailwind CSS for my other projects, would it be mo ...

htmlcssreactjstailwind-css

Unable to adjust the width of a table column within a horizontally scrollable container

I am struggling to resize the columns of a large table with 20 headers. Despite trying to place the table inside a div with overflow:auto, I still cannot achieve horizontal scrolling or make the div expand when resizing the columns. A sample code snippet ...

javascriptcssvue.jsresizescrollable

Position the second line of text to align in MUI

I am facing an issue with aligning the text on the second line. It should match up with the text on the first line. For reference, you can check out the Codesandbox by CLICKING HERE <Card sx={{ maxWidth: 200 }}> <CardMedia component="i ...

cssreactjsmaterial-ui

Accepting PHP multidimensional array through ajax

My PHP code includes a script to open a database, fetch data, and encode it into JSON format. include_once($preUrl . "openDatabase.php"); $sql = 'SELECT * FROM dish'; $query = mysqli_query($con,$sql); $nRows = mysqli_num_rows($query); if($nRow ...

javascriptphphtmlajaxhtml-framework-7

Different methods to retrieve content within a div that is located on a separate, included page

It's a bit tricky to come up with a title for this topic, but essentially, I'm trying to figure out how to get content from an included page into a specific div using HTML and PHP. Let me break it down: In the header.php file, we have the follo ...

javascriptphpjqueryhtml

Is there a way to adjust the position of the scrolling bar to be closer to the post area?

I was exploring this page (http://noahsdad.com/state-fair-texas-2011/) and noticed a scrolling sidebar to the left of the content area. I'm looking to adjust it so that it is closer to the content area. Any suggestions on how to achieve this? Thank y ...

css

Delete the top row from the table

After extensive searching on various websites, I am still unable to resolve my html or CSS issue. An unexpected line is appearing above the table here. Here's the code snippet that is causing trouble: <table border="0" width="840" cellspacing="0" ...

htmlcsshtml-table

Issues with iFrame Alignment

I recently created a digital catalog using FlipHTML5 and realized it needed to be more mobile-friendly. To address this issue, I included the following CSS: .size { width: 85vw; height: 75vh; Although this adjustment made the catalog display correctly on ...

htmlcssiframe

Boosting your website with a slick Bootstrap 4 responsive menu that easily accommodates additional

I have incorporated a main menu in my website using the Bootstrap 4 navbar. However, I also have an additional div (.social-navbar) containing some extra menu items that I want to RELOCATE and INSERT into the Bootstrap menu only on mobile devices. Essentia ...

javascriptjquerycsstwitter-bootstrap

Exploring Objects within an array using Angular loops

Hey there, I'm currently working on an Angular project and I need to retrieve the userName of the user for each comment that is posted. These entities are coming from my Spring Boot project. Is there a way to access the username for every comment? He ...

htmlangulartypescriptloops

What is the best way to showcase a String variable with spaces in the value field of a form within JSP?

When working with a String variable in JSP and trying to display it in a form field, there might be an issue if the string contains spaces. Only the first word is displayed instead of the entire sentence. Below is the code snippet along with the resulting ...

javahtmlcssjsp

Is it possible to securely share login details on the internet?

I'm currently brainstorming different ways to securely display FTP, database, and hosting information for website projects on my project management site. One potential solution I'm considering is encrypting the passwords and developing an applica ...

phpmysqlhtml

Altering CSS styles through JavaScript or jQuery

Exploring Options After investigating the use of .css() to manipulate CSS properties of specific elements, I came across a website showcasing the following CSS: body, table td, select { font-family: Arial Unicode MS, Arial, sans-serif; font-size: ...

javascriptjquerycssstyles

HTML5 Canvas Border

Hey Everyone, I've been working on an HTML5 canvas project where I set the canvas width to $(window).width(). Everything was going smoothly until I added a border, which caused a horizontal scroll to appear. Important: I attempted to use the innerWid ...

javascriptjqueryhtmlcsscanvas

What is the best way to position an image behind textboxes?

Need help with moving an image behind textboxes and a sign-in button? Check out my issue: https://i.stack.imgur.com/cGoEU.png The image is currently covering the login form. How can I position it properly? Here's the code snippet causing the issue: ...

htmlcssimagebuttontextbox

Error: Unable to access the property 'fontSize' as it is undefined

<!DOCTYPE HTML> <html> <head> <title>Interactive Web Page</title> <link id="mycss" rel="stylesheet" href="mycss.css"> <script> function resizeText(size) { va ...

javascripthtmlcssdom

Adjust the color of text as you scroll

Could you provide guidance on changing the color of fixed texts in specific sections of my portfolio website? Unfortunately, I can't share my lengthy code here, but would greatly appreciate it if you could illustrate with examples. Here's a refer ...

javascripthtmlcss

Why isn't the parent div stretching alongside its child divs?

Take a look at this example: wthdesign.net/website/olaf&co/index.php I am currently working on creating a responsive layout, but I am struggling to figure out how to make the "#content" div stretch with its child div when there is more content than ex ...

csshtmllayoutstretch

Additional <li> elements are created in Internet Explorer versions 8 and 9

Currently in the process of setting up a new website/landing page. Upon heading to the right column at the bottom (where the pictures are located), you will notice <li> elements containing pictures within containers. The only issue that arises is whe ...

htmlcsshtml-lists

Customizing CSS based on URL or parent-child relationship in WordPress

I'm having trouble finding a solution for what seems like a simple issue... Currently, my header has a border-bottom and I'd like to change the color of this border based on the section the user is in. For example, consider these parent pages: ...

javascriptjquerycsswordpress