Я пытаюсь понять, как перекрывать два контура ячеек, чтобы был 1 пиксель, который будет использоваться для двух ячеек. Ниже мой HTML и Js код:
function genDivs(rows, cols)
{
var e = document.getElementById("gridContainer");
for(var r = 0; r < rows; r++)
{
var row = document.createElement("div");
row.className = "row";
for(var c = 0; c < cols; c++)
{
var cell = document.createElement("div");
if(r == 10 && c == 20)
cell.className = "gridsquare begin";
else if(r == 10 && c == 40)
cell.className = "gridsquare end";
else
cell.className = "gridsquare";
row.appendChild(cell);
}
e.appendChild(row);
}
}
genDivs(10, 20);
<!DOCTYPE html>
<html>
<head>
<style>
#gridContainer
{
}
.row
{
display: block;
}
.gridsquare
{
width: 25px;
height: 25px;
outline: 1px solid rgb(175, 216, 248);
display: inline-block;
margin-bottom: -4px;
margin-left: 0px;
}
.begin
{
background-color: purple;
}
.end
{
background-color: magenta;
}
</style>
</head>
<body>
<div id="gridContainer"></div>
<script type="text/javascript" src="HomeScript.js"></script>
</body>
</html>
Я пытался использовать границу в качестве альтернативы контуру, но в результате получилась неровная граница 1 пиксель, например, граница была 1px 1px 1px 1px 2px 1px 1px 1px 1px 2px и так далее ... Любая помощь будет оценена.