1

私は最近、ある種の描画グリッドに取り組んでおり、境界線の間隔を使用しています。

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

アイデアは、事前に設定されたサイズと境界線の間隔を持つ固定量のセルでテーブルを形成することです。

var res = 16;
var cell_size = 8;
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();
    }
}

小さな (<4px) 境界線サイズを使用すると、Chrome で正しく機能しないようです。セル サイズは 0.4 px 前後でオフセットされ始めます。Chrome には、このオフセットに影響を与える計算済み Webkit オプションが 2 つあります。

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

ただし、次のように変更することはできません。

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

計算された値は 0.8 ピクセルのままです。最終的には大したことではありませんが、本当に気になります。このような動作の理由はありますか?また、そのような低い値で正確なセル サイズを設定することは可能ですか?

フィドルの例を次に示します: https://jsfiddle.net/kdqoc4vy/1/

cell_size は正確に20px である必要がありますが、実際には 19.2 です。

PS With Edge すべてが正常に機能します。テーブルが小さい場合、この 0.8px はほとんど問題になりませんが、64 行と 64 列になると、このような不一致が問題になります。お返事ありがとうございます!

4

0 に答える 0