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;}