CODEWITHSUNDEEP
htmlcss
Abhishek
Abhishek

Reputation: 63

Overlap the outlines of the cell

I am trying to understand how to overlap the two outlines of the cells such that there would be 1px which will be shared for two cells. Below is my HTML and Js code:

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>

I tried using border as an alternative of outline but the result was uneven 1 px border, for example, border was 1px 1px 1px 1px 2px 1px 1px 1px 1px 2px and so on... Any help would be appreciated.

Upvotes: 1

Views: 41

Answers (1)

Manjuboyz
Manjuboyz

Reputation: 7066

You have to use box-shawdow for this:

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);
#gridContainer {}

.row {
  display: block;
}

.gridsquare {
  width: 25px;
  height: 25px;
  box-shadow: 0 0 0 1px rgb(175, 216, 248) inset, 0 0 0 1px rgb(175, 216, 248);
  margin-bottom: -4px;
  margin-left: 0px;
  display: inline-block;
}

.begin {
  background-color: purple;
}

.end {
  background-color: magenta;
}
<body>
  <div id="gridContainer"></div>
  <script type="text/javascript" src="HomeScript.js"></script>
</body>

Upvotes: 1

Related Questions