var tag = document.createElement("div");
var element = document.getElementById("container");
for(let i = 1; i<17; i++){
var tag = document.createElement("div");
tag.setAttribute('id', `row`)
tag.setAttribute('tag', `parent`)
element.appendChild(tag);
var elements = document.getElementById(`row`)
for(let j = 1; j<17; j++){
var tags = document.createElement("div");
tags.setAttribute('id', `${j}`)
tags.setAttribute('cell', `yes`)
tags.setAttribute('parent', `${i}`)
elements.appendChild(tags)
elements.removeAttribute("id")
//console.log(elements)
}
}
var cells = document.querySelectorAll('parent')
addEventListener('mouseover', function(e) {
const selectedCell = e.path[0]
//console.log(selectedCell.getAttribute('parent'))
//console.log(typeof selectedCell.getAttribute('parent'))
if(typeof selectedCell.getAttribute('parent') === 'string'){
selectedCell.setAttribute('selected', 'true')
//console.log(selectedCell)
}
})
#container {
display: flex;
flex-wrap: wrap;
align-items: baseline;
align-content: stretch;
height: 960px;
width: 960px;
}
div[tag]{
display: flex;
flex-direction: row;
height: 60px;
width: 100%;
flex-grow: 1;
}
[tag] > [id]{
display: flex;
height: 60px;
flex-direction: row;
flex-grow: 1;
}
div[selected]{
background-color: black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<div id="container">
</div>
<script src = "app.js"></script>
</body>
</html>
I am currently on the tail end of the introductory front-end course from OdinProject, however, I am stuck on the etch-a-sketch assignment. The CSS (located below) will only fill out properly if I set a fixed height in pixels.
div#container {
border-color: red;
height: 960px;
width: 960px;
flex-direction: row;
}
div[tag*="parent"]{
display: flex;
flex-direction: row;
height: auto;
width: 100%;
flex-grow: 1;
}
div[cell*="yes"]{
display: flex;
height: auto;
flex-direction: row;
flex-grow: 1;
}
div[selected]{
background-color: black;
}
If I set the height to auto (as present in the current styling), the width is fine, which is 960 pixels, but the height of the rows and the cells will be 0 pixels. Setting the height as a fixed height is okay in this scenario which is a 16x16 etch-a-sketch, however, I am planning to allow the user to select the number of cells, which would require the height to be dynamic. I have tried everything and nothing seems to work. This is my first question here, so I don't know if you will require the other code, so I will just paste it below.
var tag = document.createElement("div");
var element = document.getElementById("container");
for(let i = 1; i<17; i++){
var tag = document.createElement("div");
tag.setAttribute('id', `row`)
tag.setAttribute('tag', `parent`)
element.appendChild(tag);
var elements = document.getElementById(`row`)
for(let j = 1; j<17; j++){
var tags = document.createElement("div");
tags.setAttribute('id', `${j}`)
tags.setAttribute('cell', `yes`)
tags.setAttribute('parent', `${i}`)
elements.appendChild(tags)
elements.removeAttribute("id")
console.log(elements)
}
}
var cells = document.querySelectorAll('parent')
addEventListener('mouseover', function(e) {
const selectedCell = e.path[0]
//console.log(selectedCell.getAttribute('parent'))
console.log(typeof selectedCell.getAttribute('parent'))
if(typeof selectedCell.getAttribute('parent') === 'string'){
selectedCell.setAttribute('selected', 'true')
console.log(selectedCell)
}
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<div id="container">
</div>
<script src = "app.js"></script>
</body>
</html>
I changed the height and width on div#container to 100vh and 100vw. This is so that the container fills the whole viewport, which is what you want as I understand.
I removed the height:auto on the parent and cell classes and I also removed width:100%
I created a variable called gridSize with let. I replaced the 17 with this variable gridSize in the two loops and I added the following to calculate the height of the cell:
let cellHeight = Math.floor((100 / gridSize) * 1000) / 1000 + "vh";
And, then I set the height of the cell dynamically with:
tags.style.height = gridSize
which effectively is the same as:
tags.style.height = "10vh" // if gridSize is 10
tags.style.height = "5vh" // if gridSize is 20
You should be able to implement the functionality to allow the user to dynamically select the grid size. This demo should show you the way forward.
var tag = document.createElement("div");
var element = document.getElementById("container");
let gridSize = 17;
let cellHeight = Math.floor((100 / gridSize) * 1000) / 1000 + "vh";
for (let i = 1; i < gridSize; i++) {
var tag = document.createElement("div");
tag.setAttribute('id', `row`)
tag.setAttribute('tag', `parent`)
element.appendChild(tag);
var elements = document.getElementById(`row`)
for (let j = 1; j < gridSize; j++) {
var tags = document.createElement("div");
tags.setAttribute('id', `${j}`)
tags.setAttribute('cell', `yes`)
tags.setAttribute('parent', `${i}`)
tags.style.height = cellHeight;
elements.appendChild(tags)
elements.removeAttribute("id")
}
}
var cells = document.querySelectorAll('parent')
addEventListener('mouseover', function(e) {
const selectedCell = e.path[0]
if (typeof selectedCell.getAttribute('parent') === 'string') {
selectedCell.setAttribute('selected', 'true')
}
})
div#container {
border-color: red;
height: 100vh;
width: 100vw;
flex-direction: row;
}
div[tag*="parent"] {
display: flex;
flex-direction: row;
flex-grow: 1;
}
div[cell*="yes"] {
display: flex;
flex-direction: row;
flex-grow: 1;
}
div[selected] {
background-color: black;
}
<div id="container"></div>
Related
I'm making a grid and I'm not sure how to make the cells fill the space between them when the grid size changes.
I have a function that generates a grid and receives size as a parameter.
What should be added to the grid-square class to make the cells fill the entire space?
//get the grid div
const container = document.querySelector("#container");
function changeColor(e) {
const hoverColor = Math.floor(Math.random() * 16777215).toString(16);
e.target.style.backgroundColor = "#" + hoverColor;
}
function createDivs(size) {
//generate grid elements
for (let i = 0; i < size * size; i++) {
const newDiv = document.createElement("div");
newDiv.classList.add("grid-square");
newDiv.addEventListener("mouseover", changeColor);
container.appendChild(newDiv);
}
}
createDivs(2);
* {
box-sizing: border-box;
}
#container {
display: flex;
background-color: rgba(49, 49, 49, 0.281);
width: 50vw;
height: 50vh;
flex-wrap: wrap;
}
.grid-square {
background-color: white;
width: 50%;
aspect-ratio: 1/1;
}
.grid-square:hover {
cursor: pointer;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Etch a Sketck</title>
<link rel="stylesheet" href="style.css" />
<script src="script.js" defer></script>
</head>
<body>
<div id="container"></div>
</body>
</html>
So this is the way I did it. I changed from flex box to grid. Grid has a property called grid-template-columns that defines how many columns you have and how wide each one is. The syntax here is grid-template-columns: repeat(n, 1fr) where n is the number of columns you want.
In order to set the column numbers in javascript, I've used a css custom property (also called a css variable) to define the column numbers. To set the custom property itself I've set the element's style attribute to define that property on load.
Have a look below:
//get the grid div
const container = document.querySelector("#container");
function changeColor(e) {
const hoverColor = Math.floor(Math.random() * 16777215).toString(16);
e.target.style.backgroundColor = "#" + hoverColor;
}
function createDivs(size) {
//generate grid elements
for (let i = 0; i < size * size; i++) {
const newDiv = document.createElement("div");
newDiv.classList.add("grid-square");
newDiv.addEventListener("mouseover", changeColor);
container.appendChild(newDiv);
}
// Added this
container.style.cssText="--cols: "+size;
}
createDivs(5);
* {
box-sizing: border-box;
}
#container {
/* added this */
display: grid;
grid-template-columns: repeat(var(--cols), 1fr);
/* end of added css */
background-color: rgba(49, 49, 49, 0.281);
width: 50vw;
height: 50vh;
flex-wrap: wrap;
}
.grid-square {
background-color: white;
aspect-ratio: 1/1;
}
.grid-square:hover {
cursor: pointer;
}
<div id="container"></div>
The solution was to set the width when creating the cells.
//get the grid div
const container = document.querySelector("#container");
function changeColor(e) {
const hoverColor = Math.floor(Math.random() * 16777215).toString(16);
e.target.style.backgroundColor = "#" + hoverColor;
}
function createDivs(size) {
//generate grid elements
for (let i = 0; i < size * size; i++) {
const newDiv = document.createElement("div");
newDiv.classList.add("grid-square");
newDiv.addEventListener("mouseover", changeColor);
//Setting the width
newDiv.style.width = 100 / size + "%";
container.appendChild(newDiv);
}
}
createDivs(6);
* {
box-sizing: border-box;
}
#container {
display: flex;
background-color: rgba(49, 49, 49, 0.281);
width: 50vw;
height: 50vh;
flex-wrap: wrap;
}
.grid-square {
background-color: white;
width: 50%;
aspect-ratio: 1/1;
}
.grid-square:hover {
cursor: pointer;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Etch a Sketck</title>
<link rel="stylesheet" href="style.css" />
<script src="script.js" defer></script>
</head>
<body>
<div id="container"></div>
</body>
</html>
I have a container grid, that I'm trying to set the width and height of proportionally by passing that one number as an argument tiles in my createSketchGrid function. I'm using the variable gridSize to take the arguments tiles and multiply it by itself. The result is a container that is quite a bit wider than its height.
I'm not quite sure how to set this evenly and multiplying it doesn't make it proportional, either. Is there a way to set the width and height to be the same if I use this one argument? I also think that setting the container's display property to flex may be part of the problem as well.
const grid = document.querySelector('#grid');
const userInput = document.querySelector('#user-input');
grid.style.fontSize = '1em';
// Set pixel width and height
let wdt = '1.25em';
let hgt = '1.25em';
// Ask the user for the number of tiles for the sketch grid
function getUserInput() {
let input = parseInt(prompt(`Please enter the grid size you'd like`));
input <= 100 || !isNaN(input)
? createSketchGrid(input)
: alert('Please enter a valid number less than or equal to 100.');
}
// Event listener to create tiles in mouseover
function setTiles(e) {
e.target.classList.add('fill');
}
function deleteTiles(e) {
e.target.classList.toggle('fill');
}
// Create the grid
function createSketchGrid(tiles) {
let gridSize = tiles * tiles;
for (let i = 0; i < gridSize; i++) {
let tile = document.createElement('div');
tile.style.width = wdt;
tile.style.height = hgt;
grid.appendChild(tile);
tile.addEventListener('mouseover', setTiles);
}
}
userInput.addEventListener('click', getUserInput);
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 10px;
}
h1 {
font-size: 3rem;
}
.grid {
display: flex;
flex-wrap: wrap;
gap: 0.1em;
background-color: lightgrey;
flex: 0 0 32em;
}
.fill {
flex-wrap: wrap;
background-color: black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Etch A Sketch</title>
<link rel="stylesheet" type="text/css" href="styles/style.css">
<script type="text/javascript" src="js/main.js" defer></script>
</head>
<body>
<h1 class="title">Etch A Sketch</h1>
<div id="container" class="container">
<button id="user-input" class="btn user-input" value="Grid Size">Grid Size</button>
<div id="grid" class="grid">
</div>
</div>
</body>
</html>
Using CSS grid, we can define how many columns we want (here I have just used the regular repeat(..., ...) method), and we can also change the width of the grid to match.
const grid = document.querySelector('#grid');
const userInput = document.querySelector('#user-input');
grid.style.fontSize = '1em';
// Set pixel width and height
let wdt = '1.25em';
let hgt = '1.25em';
// Ask the user for the number of tiles for the sketch grid
function getUserInput() {
let input = parseInt(prompt(`Please enter the grid size you'd like`));
input <= 100 || !isNaN(input)
? createSketchGrid(input)
: alert('Please enter a valid number less than or equal to 100.');
}
// Event listener to create tiles in mouseover
function setTiles(e) {
e.target.classList.add('fill');
}
function deleteTiles(e) {
e.target.classList.toggle('fill');
}
// Create the grid
function createSketchGrid(tiles) {
let gridSize = tiles * tiles;
for (let i = 0; i < gridSize; i++) {
let tile = document.createElement('div');
tile.style.width = wdt;
tile.style.height = hgt;
grid.appendChild(tile);
tile.addEventListener('mouseover', setTiles);
}
// change style
grid.style.gridTemplateColumns = `repeat(${tiles}, 1fr)`;
// calculate new width
grid.style.width = `calc(${wdt} * ${tiles} + 0.1em * ${tiles - 1})`;
}
userInput.addEventListener('click', getUserInput);
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 10px;
}
h1 {
font-size: 3rem;
}
.grid {
display: grid;
grid-template-columns: repeat(0, 1em);
gap: 0.1em;
background-color: lightgrey;
}
.fill {
flex-wrap: wrap;
background-color: black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Etch A Sketch</title>
<link rel="stylesheet" type="text/css" href="styles/style.css">
<script type="text/javascript" src="js/main.js" defer></script>
</head>
<body>
<h1 class="title">Etch A Sketch</h1>
<div id="container" class="container">
<button id="user-input" class="btn user-input" value="Grid Size">Grid Size</button>
<div id="grid" class="grid">
</div>
</div>
</body>
</html>
im trying to make static grid with a button that can change number of boxes in it (from 16x16 to 64x64 and anything between). Grid is 40rem x 40rem, when i try to change manually number of boxes in makeGrid() function it works fine up to 20 (boxes change size accordingly), but anything above 20 stays the same size and gets cutoff from my grid. If there is no grid css overflow property stated, grid width change depending on number of boxes but boxes themself won't shrink
my code:
size button is not working yet, grid size need to be changed mannualy in makeGrid function
const grid = document.getElementById('grid');
const size = document.getElementById('size');
const eraser = document.getElementById('eraser');
const color = document.getElementById('color');
const gridBorder = document.getElementById('grid-borders');
const clear = document.getElementById('clear');
// grid
function makeGrid(number) {
number = number || 16;
let cellWidth = 40 / number + 'rem';
let cellHeight = 40 / number + 'rem';
grid.style.gridTemplateColumns = `repeat( ${number}, 1fr)`;
grid.style.gridTemplateRows = `repeat(${number}, 1fr)`;
for (let i = 0; i < number * number; i++) {
let cell = document.createElement('div');
grid.appendChild(cell).id = 'box';
cell.classList.add('border');
cell.classList.add('box');
cell.style.backgroundColor = 'white';
cell.style.width = cellWidth;
cell.style.height = cellHeight;
}
size.textContent = `${number} x ${number}`;
}
makeGrid();
// drawing on hover
color.addEventListener('click', function () {
grid.addEventListener('mouseover', function (e) {
e.target !== grid ? (e.target.style.backgroundColor = 'black') : null;
});
});
function changeColor(event) {
event.target.style.backgroundColor = 'black';
}
// erase functionality
eraser.addEventListener('click', function () {
grid.addEventListener('mouseover', function (e) {
e.target !== grid ? (e.target.style.backgroundColor = 'white') : null;
});
});
// grid borders
const allBoxes = document.querySelectorAll('.box');
gridBorder.addEventListener('click', function () {
allBoxes.forEach((box) => {
box.classList.toggle('no-border');
box.classList.toggle('border');
});
});
// clear button
clear.addEventListener('click', function () {
allBoxes.forEach((box) => {
box.style.backgroundColor = 'white';
});
});
// size button
// size.addEventListener('click', function () {
// let number = prompt(`Enter grid size less or equal to 100`);
// if (number !== Number.isInteger()) {
// return;
// } else if (number > 100) {
// number = prompt(`Enter grid size greater or equal to 100`);
// }
// });
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
background-color: aquamarine;
}
#grid {
display: grid;
justify-content: center;
border: 1px solid #ccc;
width: 40rem;
height: 40rem;
min-width: 0;
min-height: 0;
overflow: hidden;
}
.box {
padding: 1em;
}
#title {
display: flex;
align-items: flex-end;
justify-content: center;
height: 180px;
}
#container {
display: flex;
height: 60%;
width: 1259px;
align-items: flex-start;
justify-content: flex-end;
gap: 20px;
padding-top: 20px;
}
#menu {
display: flex;
flex-direction: column;
gap: 10px;
}
.border {
outline: 1px solid black;
}
.no-border {
outline: none;
}
.black-bg {
background: black;
}
.white-bg {
background: white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Etch-a-Sketch</title>
<link rel="stylesheet" href="style.css" />
<script src="script.js" defer></script>
</head>
<body>
<div id="title">
<h1>Etch-a-Sketch</h1>
</div>
<main id="container">
<div id="menu">
<button id="size"></button>
<button id="color">Color</button>
<button id="eraser">Eraser</button>
<button id="clear">Clear</button>
<button id="grid-borders">Grid Borders</button>
</div>
<div id="grid"></div>
</main>
</body>
</html>
"Why won't my grid cells go below 32px?" - have you checked your padding (hint: 32px is exactly equal to 2 * 16px which in turn is exactly equal to your padding of 1em with most browsers implementing a default font-size of 16px). –
David Thomas
box padding was set to 1em which caused my problem, after deleting it my grid worked as intended
I'm doing a project to make an etch-a-sketch every time I hover on the grid. What I'm trying to do is to make a button to clear up all the colors made.
The sketch picture.
I guess what I need to do is to remove the style elements while clicking the button. But I'm just note sure how to link the button with the style elements.
const container = document.querySelector(".container");
// const table = document.createElement('div');
// table.classList.add('grid-square');
// table.textContent = 'hello';
// container.appendChild(table);
function makeTable(rows, cols) {
container.style.setProperty('--grid-rows', rows);
container.style.setProperty('--grid-cols', cols);
for (i = 0; i < (rows * cols); i++){
const cell = document.createElement('div');
// cell.innerText = (i + 1);
container.appendChild(cell).className = "table";
};
};
makeTable(16, 16);
// const container = document.querySelector('.container')
const grids = document.querySelectorAll('.table')
grids.forEach(element => {
element.addEventListener('mouseover', (e) => {
e.target.style.backgroundColor = randomColor();
console.log(e)
})
});
function randomColor() {
var generateColor = '#' + Math.floor(Math.random()*16777215).toString(16);
return generateColor;
}
function resizeGrid() {
sketchSize = prompt("Enter 1 to 100 to resize sketch");
return sketchSize;
}
// const button = document.querySelector('button')
// button.addEventListener('click', (e) => {
// });
:root {
--grid-rows: 1;
--grid-cols: 1;
}
.container {
display: grid;
/* grid-gap: 1em; */
grid-template-rows: repeat(var(--grid-rows), 1fr);
grid-template-columns: repeat(var(--grid-cols), 1fr);
/* border: 1px solid black; */
width: 50%;
size: 960px;
}
.table {
padding: 1em;
border: 1px solid coral;
text-align: center;
/* border: none; */
}
header {
display: flex;
justify-content: center;
margin: 20px;
gap: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Etch-A-Sketch</title>
<script src="index.js" defer></script>
<link rel="stylesheet" href="index.css">
</head>
<body>
<header>
<button class="clear-button">Clear</button>
<button class="resize">Resize</button>
</header>
<div class="container"></div>
</body>
</html>
Cheers!!
To answer my own question, I figured how to do it.
const clear = document.querySelector('.clear-button')
clear.addEventListener('click', () => {
grids.forEach(element => {
element.style.backgroundColor = null;
})
})
I was struggling earlier because I'm not sure how to put other elements (e.g. grids) to the new eventListener.
when scrolling a table, the blue block in it does not move along with the cells, can this be somehow fixed?
ignore this text, I just don’t know what else to write -> It looks like your post is mostly code; please add some more details.It looks like your post is mostly code; please add some more details.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
overflow: auto;
width: 75%;
}
td {
border: 1px solid #000;
width: 40px;
height: 20px;
color: #fff;
}
.cell {
background-color: blue;
position: absolute;
z-index: 2;
}
</style>
</head>
<body>
<div class="container"></div>
<script>
function getPosition(el) {
let rect = el.getBoundingClientRect(),
scrollLeft = window.pageYOffset || document.documentElement.scrollLeft,
scrollTop = window.pageYOffset || document.documentElement.scrollTop
return {
top: rect.top + scrollTop,
left: rect.left + scrollLeft
}
}
function tableInit(parent, row, cols) {
const table = document.createElement('table')
let counter = 0
for (let i = 0; i < row; i++) {
let tr = document.createElement('tr')
for (let j = 0; j < cols; j++, counter++) {
let td = document.createElement('td')
td.textContent = counter
td.classList.add(counter)
tr.appendChild(td)
}
table.appendChild(tr)
}
parent.appendChild(table)
}
let container = document.querySelector('.container')
tableInit(container, 7, 100)
let table = document.querySelector('table')
let td = document.getElementsByClassName('104')[0]
let cell = document.createElement('div')
cell.classList.add('cell')
cell.setAttribute('style',
`top: ${getPosition(td).top}px;
left: ${getPosition(td).left}px;
height: ${td.clientHeight + 2}px;
width: ${td.clientWidth * 2}px;`)
table.appendChild(cell)
</script>
</body>
</html>
You need to give your table or your container a position, so that your browser knows how it flows in the DOM. Without this, your .cell is absolute to the container not the scrolling children.
Watch out for the second line in tableInit(). That's one possible solution.
function getPosition(el) {
let rect = el.getBoundingClientRect(),
scrollLeft = window.pageYOffset || document.documentElement.scrollLeft,
scrollTop = window.pageYOffset || document.documentElement.scrollTop
return {
top: rect.top + scrollTop,
left: rect.left + scrollLeft
}
}
function tableInit(parent, row, cols) {
const table = document.createElement('table')
table.setAttribute('style', `position: relative`) // Give the table a position
let counter = 0
for (let i = 0; i < row; i++) {
let tr = document.createElement('tr')
for (let j = 0; j < cols; j++, counter++) {
let td = document.createElement('td')
td.textContent = counter
td.classList.add(counter)
tr.appendChild(td)
}
table.appendChild(tr)
}
parent.appendChild(table)
}
let container = document.querySelector('.container')
tableInit(container, 7, 100)
let table = document.querySelector('table')
let td = document.getElementsByClassName('104')[0]
let cell = document.createElement('div')
cell.classList.add('cell')
cell.setAttribute('style',
`top: ${getPosition(td).top}px;
left: ${getPosition(td).left}px;
height: ${td.clientHeight + 2}px;
width: ${td.clientWidth * 2}px;`)
table.appendChild(cell)
.container {
overflow: auto;
width: 75%;
}
td {
border: 1px solid #000;
width: 40px;
height: 20px;
color: #fff;
}
.cell {
background-color: blue;
position: absolute;
z-index: 2;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="container"></div>
</body>
</html>
If you want the blue block to stay put in its position alongside the empty blocks, you need to make the container relative.
.container {
position: relative;
}