Why are the table row borders fluctuating in width instead of remaining consistent?

I am encountering an issue where the border width for each table row is alternating instead of remaining a solid 1px. This inconsistency is puzzling to me, especially since I am testing it on Chrome. Any insights on why this is happening?

table {
    border-collapse: collapse;
}
.compositeEventContainer table tbody tr {
    border-bottom: 1px solid;
}
<div class="compositeEventContainer">
    <table>
        <tbody>
            <tr>
                <td>first</td>
                <td>1</td>
                <td>Test</td>
            </tr>
            <tr>
                <td>second</td>
                <td>2</td>
                <td>Test</td>
            </tr>
            <tr>
                <td>third</td>
                <td>3</td>
                <td>Test</td>
            </tr>
            <tr>
                <td>fourth</td>
                <td>4</td>
                <td>Test</td>
            </tr>
            <tr>
                <td>fifth</td>
                <td>5</td>
                <td>Test</td>
            </tr>
            <tr>
                <td>sixth</td>
                <td>6</td>
                <td>Test</td>
            </tr>
        </tbody>
    </table>
</div>

I am currently working on Windows and using Chrome as my browser.

Answer №1

Although I may not have a direct solution to your issue, based on the feedback provided, here are some troubleshooting steps you can try:

  1. Reset your Chrome settings by navigating to settings, selecting "Show advanced settings...", and scrolling down to the bottom where you'll find the option to "Reset settings".
  2. Consider uninstalling/reinstalling Chrome without logging in with your username to avoid syncing settings.
  3. Test the same scenario on a different computer running the same version of Chrome.
  4. Check the encoding settings in Chrome by going to Options, More Tools, then Encoding.

Given the various possibilities, it seems like the issue is specific to your computer. If the problem doesn't occur in other browsers, it likely stems from Chrome. However, there could be a system setting causing this as well.

Here are a few areas to investigate:

  1. Advanced Display Settings, Monitor Settings, Refresh rate adjustment.
  2. Video card custom properties like NVidia Experience Panel or AMD Control Center.
  3. Examine your DPI settings (Control Panel -> Appearance and Personalization -> Display) for any discrepancies in text size scaling.

I hope these tips point you in the right direction towards resolving your issue. If any of them prove to be the solution, please share your feedback with me.

Answer №2

This frustrating issue arises due to the pixel scale variations in different operating systems. In essence, browsers tend to round border widths to the nearest device pixel, leading to inconsistent border appearances. An unconventional workaround involves setting a border width of less than 1px to ensure correct rounding to the nearest device pixel.

tr { border-bottom: solid .5px #d3d3d3; }

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

Expanding a dropdown list on the fly using vanilla JavaScript

I am restricted to using Vanilla JavaScript only, without any additional libraries like jQuery. Initially, I attempted to store all registered items in a global array and then use a forEach loop to append an <option> child to the <select>. How ...

Creating a grid with individual node delays in CSS animations using ReactJS

Struggling with a CSS animation issue in ReactJs. I suspect the problem, but unsure how to solve it. I'm rendering a 5x5 grid and displaying it using this function: DisplayNodes = () => { const {grid} = this.state; // get the node array fro ...

Resolving Issues with Text Overlaid on an Image Hyperlink

Alright, so this problem might be a bit too complex for CSS/HTML to handle, but I'll give it a shot anyway. I have some images that are dynamically placed using the code from this website. What I want to do with these images is add a text overlay w ...

Is it possible to alter the background behind each word in a text using only CSS?

I have a question about styling quotes by highlighting each word in the text with a background color. The issue I'm facing is that when using a solid background, there are no gaps between the colors. How can I achieve a result similar to this, but wit ...

Modifying the text color of a div class via CSS is not possible

I am currently facing an issue with styling a button made using a div. Despite my efforts to make the text white, the styling seems to be acting in unexpected ways. Below is the CSS section: .button a { text-align:center; display:block; backg ...

Adjust the appearance depending on the React state variable

I am trying to add animation to a search icon when clicked in React. Using the useRef hook, I am able to access the element and applying custom styles to it. const [searchBar, setSearchBar ] = useState(false); const searchIcon = useRef(); const searchIconS ...

What is the best way to evenly distribute input elements horizontally within the parent container?

I am working on a layout with five select inputs that I want to arrange horizontally within the parent div. However, the current code setup is not achieving the desired layout: <div id="divtable"> <select class="abc"></select> ...

When the mouse hovers over, the flash content in Firefox 7 will automatically reload

This is the structure I currently have: <div class="feed-item" style="position:relative;" id="feed-611" onmouseover="showDelete()" onmouseout="hideDelete()"> <div class="feed-avatar"> AVATAR </div> <div class="feed-content"> ...

Is there a way to arrange the cards in a row so they fill up the grid before moving on to the next row?

After retrieving data from a table in my database, I am displaying it on the screen as cards. However, the issue is that all the cards are displaying on the left side of the screen in a single column, rather than appearing in rows of 3 as desired. Below i ...

Establish limits for draggable item

I am working on a project where I have a draggable element generated dynamically using jQuery. The div containing the element also has a background image. How can I ensure that the draggable element never goes outside of the boundaries of the div? If you ...

When the nav menu toggler in Bootstrap 4 is clicked on a mobile screen, it causes the content to

When I view this on xs or sm screens and click on the navbar toggler, it pushes all the content, including the header where the toggler is located, down the page to accommodate the dropdown menus. This behavior seems to be different from Bootstrap 3 and Bo ...

Shifting a div's position to a different div upon resizing - a simple guide

Current Situation : I currently have two div. One is for the title and the other is for the form section. However, when I resize the screen on mobile devices, the layout does not look correct. Objective : My goal is to adjust the left margin of the di ...

Implementing WordPress link pagination for displaying only the next and previous buttons

I'm new to WP and need some guidance. I want to display a list of images in a post, with the ability for users to click next and previous to cycle through them like separate pages. To split the post into multiple pages, I added this code: <!- ...

What is the process for altering the active color of a materialize icon?

Currently working on a web application for my school project and incorporating the Materialize framework. However, I'm having trouble modifying the default teal color of the active icon. https://i.sstatic.net/9eEfM.jpg ...

Tips on exporting the 'invisible section' as a PDF without it being displayed on the user interface

Kindly take a look at the concealed div element below. It is being utilized as a hidden component to structure the PDF contents for download as a PDF. The HTML elements are declared as follows. <div id="griddata" style="display:none;"> <div id= ...

Press the button to access the URL within the current window

Working with Angular, I attempted to develop a function to open a URL in the current window. However, the code below within the controller actually opens a new window: $scope.openUrl = function(url) { $window.open(url); }; ...when using ng-click=&apo ...

"Adding dots" in a slideshow using HTML, CSS, and JS

I'm currently working on a slideshow that includes navigation dots at the bottom. Although the slideshow is functioning properly, I am encountering an issue where only one dot appears instead of the intended three in a row. Despite my research and att ...

AngularJS allows for the submittal button to be adjusted accordingly when changes are made in

Currently, I am working on an app that involves an edit form. Initially, the save button is disabled, and it becomes enabled once text is inputted into the form (accomplished using $dirty). The problem arises when the form is "saved" (meaning the informat ...

Eliminate the mystery overflow in your CSS styling

My website is experiencing overflow on the x axis, even though all vw/width properties are set to 100. I suspect that the .logout element may be causing this issue, but I'm not sure what exactly needs to be modified to resolve it. Any assistance would ...

Show form using inline HTML styling

Can someone help me with this issue? I attempted to add in-line forms for "subject" and "email," but it did not work as expected. How can I resolve this problem? I am using Wordpress and the CForm Builder plugin. Thank you in advance for any assistance! ...