私は最近、ある種の描画グリッドに取り組んでおり、境界線の間隔を使用しています。
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 列になると、このような不一致が問題になります。お返事ありがとうございます!