If you encounter a 1px space issue when resizing the viewport and using display: table; with fixed width cell

In our responsive projects, we are facing an issue with the display property set to table. Our table is wrapped within a container and set to 100% width, with one of the cells having a fixed pixel width.

As we resize the browser window, we notice that there is a 1px space on the right side of each cell every 3px the viewport is resized. We have been searching for a solution or workaround to this problem but so far have not found one...

If you would like to see an example of this issue, feel free to check out the following Codepen link in Chrome or Safari and resize your browser horizontally: http://codepen.io/jstnrs/pen/RNqOWP

.table {
    display: table;
    table-layout: fixed;
    width: 100%;  
}

.table-cell {
    display: table-cell;
}

.table-cell-01 {width: 25%;}
.table-cell-02 {width: 25%;}
.table-cell-03 {width: 100px;}

Answer №1

It appears that a glitch has been discovered in the WebKit rendering engine. The .wrapper class seems to not be scaling consistently with the .table class (a solution could involve moving the background-color styling to the .table). Be sure to check out this link to verify if this issue has already been reported (I did a quick search but couldn't find any existing reports). If it hasn't been addressed yet, don't hesitate to file a report. Well done!

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

The margin of a single flexbox item is not aligned properly

The flexbox I have contains several items. All of them are displaying correctly except for the last one, which is expanding to the edge of the div. View the current appearance of the flexbox As shown in the image, the last element is extending to the con ...

Creating if-else conditions in React can be achieved by utilizing the ternary

How can I make an if-else condition dynamic based on a button click? I have tried implementing it but it doesn't seem to work. I attempted to create conditions for different languages. For example, clicking the button labeled "Español" should print ...

Listen up, Javascript keyboard input recorder

I am aiming for the search bar to pop up when you type. The code below is functioning, but I am facing an issue where the search bar pops up even when typing in a different input field, such as the comment input. Is it feasible for the search bar not to ...

Include an edit button with each row in an HTML table for seamless editing of the database

I am currently exploring php and seeking assistance with a project for my internship. I have successfully queried all records from the mysql database and displayed them in an html table. However, I now want to include an edit button in a separate column fo ...

display information in a structured table format

I am in need of HTML code that will render headers aligned above corresponding values when displayed. header1 header2 header3 List item 1 value111 value112 value113 value121 valueb122 valueb123 List item 2 value211 value212 value213 value221 valueb2 ...

The appearance of the webkit-scrollbar is not reflecting the intended style

I have successfully created a wrapper for a styled scrollbar in React JS - import styled from '@emotion/styled'; export const ScrollbarWrapper = styled.div(() => ({ maxHeight: '65vh', overflowY: 'auto', '*::-web ...

Tips for expanding an md-nav-item in Angular Material

Need help on stretching the md-nav-item element illustration 1 ------------------------------------------------ | ITEM1 | ITEM 2 | ------------------------------------------------ illustration 2 ------------------------------------------------ | ...

Text Box: Add a touch of flair with resizing

One interesting feature on my webpage is a textarea that can be resized using resize:both; I am looking for a way to apply a specific style to this textarea only when the user resizes it. While I would prefer to achieve this with CSS alone, it seems like ...

Can an XSS attack occur on a style tag with inline styling?

For example: <!DOCTYPE html> <html lang="en"> <head> <title>Test for Potential XSS Attack</title> <style> div { background-color:blue; height:120px; ...

What impact does the text-shadow property have on altering the color of hsla text?

I created a header that changes color to be slightly transparent with a black outline when hovered over (achieved using 4 text-shadows). However, I encountered an issue when trying to use hsla() to define the color. The color defaults to black with 100% o ...

Obtaining rotate3d values using JavaScript / jQuery

When dealing with an element that has a transformation like the following: style="transform: rotate3d(1, 0, 0, -50deg);" I am looking to extract the value -50 using Javascript or jQuery. It's essential for me to get the absolute value, so negative d ...

Add flair to the ButtonBase element within a Tab component

I'm currently exploring how to override Material UI styles with a nested component. For instance, what if I want to increase the bottom border height on an active Tab, which is applied by the underlying ButtonBase. Below is the style definition: con ...

When scrolling back to the top of the page, the data-spy feature does not re-highlight the "Home" anchor

After experimenting with Data-spy to change the active anchor while scrolling, I encountered an issue. Upon scrolling back up to the top of the page from the about section, the "Home" anchor failed to re-activate. How can this be fixed? I attempted to rem ...

Is it possible to turn off the fallback color for bourbon radial gradients?

Is there a way to prevent the fallback from being applied when using the radial gradient mixin in Bourbon? I've consulted the documentation at , which states that the fallback is optional. However, no matter what I attempt, it seems that the primary ...

The `appendTo` function in Ajax is used to swap out the current element

I have been working on sending form data to a Servlet using JQuery and then receiving the response from the same JQuery. Check out the code snippet below. <%-- Document : index Created on : Feb 23, 2015, 8:18:52 PM Author : Yohan --% ...

Is there any way to extract the source files from a compiled Electron application?

Is there a way to extract the contents of a .app Application developed using Electron for Mac OS? I'm eager to explore the underlying source files, but I'm not familiar with the procedure to access them. Any assistance would be greatly appreciate ...

Leverage a single property from a CSS class within another CSS class

I am facing an issue where I need to utilize one property from a CSS class in another CSS class. .class_a {margin:10px; width: 360px; float: left; color:#ffffff; ...etc...} .class_b { use the margin property of .class_a } Only utilize the margin propert ...

Implementing a Collapse and Expand All feature within an Accordion Component

Hey there! I've been attempting to implement a Collapse All feature on my accordion but am having trouble figuring it out. The resource I've been referencing is this one. I've searched around and noticed that this accordion setup is a bit d ...

The server's file URLs are modified within the page source of a WordPress site

I've been attempting to integrate Adsense code into a WordPress blog at demonuts.com. I placed the Google code in the TEXT WIDGET provided by WordPress. However, upon running the website, I noticed that the URLs for .js, .css, or .png files are being ...

Positioning SVGs within a parent container while maintaining responsiveness

How can I anchor an SVG overlay with a circle in the bottom right corner while expanding the rest of the SVG to fill the remaining area of the container without distorting the circle? I've been able to position the SVG in the bottom right corner, but ...