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

Pass information to a PHP file using JavaScript when the form is submitted

Essentially, I am looking to extract values from various inputs and spans using JavaScript when the submit input is clicked. These values will then be sent to PHP using $post in order to ultimately send them via email. Previously, I tested replacing all of ...

javascriptphphtmlpostform-submit

In PHP, you can customize the colors to emphasize different data sets

In my MySQL database connected through PHP, I have data displayed in table format. My goal is to highlight certain data based on age with two conditions: Condition 1: - Color red (#FF7676) for ages greater than 24 Condition 2: - Color yellow (#F8FF00) fo ...

javascriptphphtmlmysqlcss

HTML: Image not updating despite meta tag refresh

I am using the following HTML5 code to display an HTML page with an image (1.JPG). The setup is working correctly, but I am encountering an issue. The image at the specified path is supposed to be randomly replaced with a newer image within a certain tim ...

html

What do the different colored highlights in Sublime Text 2 indicate?

I am facing an issue with the code in a particular file: background: -moz-linear-gradient(red, orange, yellow, green, blue, indigo, violet); Interestingly, Sublime Text 2 appears to highlight the background of indigo and violet with a light blue color: ...

csscolorsbackgroundsublimetext2highlight

Enhancing Yii2 Navbar with Icons

I recently started working with Yii2 and I am in the process of creating a simple navigation bar using the built-in widget. The main challenge I am facing is how to include icons next to the menu options. The current state of my navbar is as follows: Na ...

phpcsstwitter-bootstrapyiiyii2

What is the best way to style an icon in CSS?

I am facing an issue with the following code snippet: <span class="stars">★★☆☆☆ </span> My objective is to style the empty stars differently, but I am unsure how to specifically target them. The following CSS rule does not produc ...

javascriptjquerycsswordpressicons

Vue-Router functions only on specific routes

While my vue-router correctly routes the URL for all menu buttons, it's not displaying each Vue component properly. You can see a demonstration here. Here is a snippet of my HTML (using Vuefy) <div class="navbar-start"> <a ...

javascriptcssvue.jsvuejs2vue-router

Modifying properties through JavaScript is not possible

I created an HTML form and I'm trying to change the attributes of a div and a button but for some reason, it's not working <form> <button type='button' id='other'>Sub</button> <select id="prop"> &l ...

javascripthtml

jQuery mobile enhancing user experience with dynamic background images

I am having trouble setting different background images for each page in jQuery Mobile. <div data-role="page" id="pageone">... </div> <div data-role="page" id="pagetwo">... </div> Since each page has a unique ID, I tried ...

javascriptjqueryhtmlcssjquery-mobile

Optimizing MS Outlook 365 HTML Tables with VALIGN Alignment

How to Fix Display Issues with Tables in HTML Emails. Struggling to Vertically Align Cells at the Top? Tried this Code in HTML but it didn't work: <TD valign=top> ...

htmloutlookvalign

Matching Regex Patterns for Parents and Children

Regex has always been a struggle for me, so I could really use some guidance. I'm attempting to create opening and closing 'tags' with the same regex permitted inside these tags. For example, a tag might look like: <: tagname("[captur ...

htmlregexgo

Utilizing media queries for responsive design in CSS

I've been working on aligning the page content for different browser sizes using CSS. However, I'm having an issue with the first @media statement - no matter what changes I make in there, it doesn't affect the layout. I've been using ...

cssmobilemedia-queries

Validating user input fields to display error messages when empty

As part of my program, I need to gather information from users regarding their name and the number of pets they have. If a user enters an empty string, I want to display an error message prompting them to input something and fill the text box with their en ...

javascripthtml

List containing ionic items that spans the full height

I am trying to create a full-height list in Ionic that will always have 3 items. I want to ensure that it displays as full screen on different screen sizes. I have attempted using height:100%, but have not had success. Here is an example of what I am tryin ...

cssangularjsionic-framework

Utilizing conditionals for CSS minification with C# Regular Expressions

Hi there, I'm currently developing an application using C# in Visual Studio that focuses on minifying CSS code. Recently, I encountered a specific piece of code that removes all prefixes for the # ID selector. strCSS = Regex.Replace(strCSS, @"[a-zA-Z ...

c#.netcssregex

Text remains constant until the mouse hovers over the image

Check out this Example Here is the HTML code: <ul class="img-list"> <li> <img src="http://s11.postimg.org/ynw9rnexf/Cetina_river.jpg" width="360px" height="280px" /> <span class="text-content"><span> Text To Dis ...

htmlcss

Struggling to designate the active button on an HTML/CSS webpage

As a beginner in the world of HTML and CSS, I'm facing some challenges with making buttons appear active. My goal is to have button1 highlighted by default when it's selected, and upon clicking on button2, the content above should change successf ...

jqueryhtmlcss

Adjust the button's color even after it has been clicked

My goal is to update the button's color when it's clicked. I found some examples that helped me achieve this, but there's an issue - once I click anywhere outside of the button, the CSS class is removed. These buttons are part of a form, and ...

javascriptjqueryhtmlcss

The issue with hiding elements using .setAttribute in HTML/CSS is not occurring as expected

function showEditStudentProfile() { document.getElementById('editstudentprofile').setAttribute('class', 'unhide'); document.getElementById('profile_viewStudent').setAttribute('class', ' ...

htmlcss

What causes the sudden disappearance of the returned value from AJAX?

This piece of code is what runs on my server: modify_emp.php <?php echo $_POST[id]; ?> Below is the Javascript code in my HTML page: <script> $(document).ready(function () { var alreadyClicked = false; $('.element').h ...

javascriptphpjqueryhtmlajax