CODEWITHSUNDEEP
htmlcssgoogle-chromeborder-spacing
D.Moiseev
D.Moiseev

Reputation: 103

Cant change webkit border-spacing

I've been working on some sort of a drawing grid recently and used border-spacing.

HTML:
<table id="table"></table>
    <script>
        var res = 16;
        var cell_size = 8;
        var table = document.getElementById("table");
        var border_size = parseInt(window.getComputedStyle(table).getPropertyValue("border-spacing"),10);

        table.style.width = (cell_size + border_size) * res + border_size + "px";
        table.style.height = (cell_size + border_size) * res + border_size + "px";

        for(y=0;y<res;y++){
            var row = table.insertRow();
            for(x=0;x<res;x++){
                row.insertCell();
            }
        }
    </script>


CSS:
table{
    background: #000000;
    border-spacing: 1px;
}
td{
    padding: 0;
    background: #c9c9c9;
}

Idea is to form a table with fixed amount of cells with pre-set size and border spacing.

var res = 16;
var cell_size = 8;
var border_size = parseInt(window.getComputedStyle(table).getPropertyValue("border-spacing"),10);

Size of the whole table is then computed based on these parameters.

table.style.width = (cell_size + border_size) * res + border_size + "px";
table.style.height = (cell_size + border_size) * res + border_size + "px";

Finally the table is created via nested loop.

for(y=0;y<res;y++){
    var row = table.insertRow();
    for(x=0;x<res;x++){
        row.insertCell();
    }
}

If I use small (<4px) border size it doesn't seem to work right in Chrome - cell sizes start to be offset around 0.4 px. In Chrome there are 2 computed webkit options affecting this offset:

-webkit-border-horizontal-spacing
-webkit-border-vertical-spacing

However I can't change them like so:

-webkit-border-horizontal-spacing: 1px;
-webkit-border-vertical-spacing: 1px;

Computed values will still stay at 0.8 px. It isn't much at the end, but it really bothers me. Is there any reason for such behaviour and is it possible to have exact cell sizes with such low values?

Here is an example fiddle: https://jsfiddle.net/kdqoc4vy/1/

Note that cell_size should be exactly 20px, but in fact it is 19.2.

P.S. With Edge evertyhing works as it should. This 0.8px is almost nothing when the table is small, but when it has 64 rows and columns such inconsistency becomes a problem. Thanks in advance for your reply!

Upvotes: 1

Views: 264

Answers (0)

Related Questions