Grid as HTML table

4.3.2026

CSS

index.html Raw #

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>

	
	<html>
    <body>
        <div class="gridTable">
            <div> <!-- Header -->
                <div>Timeclock.Kiwi</div>
                <div>Payroll</div>
                <div>Checked</div>
            </div>
            
            <div> <!-- Body -->
                <div>
                    <div>Cat</div>
                    <div>In</div>
                    <div>Hat</div>
                </div>
                <div>
                    <div>Cat</div>
                    <div>In</div>
                    <div>Hat</div>
                </div>
                <div>
                    <div>Cat</div>
                    <div>In</div>
                    <div>Hat</div>
                </div>
                <div>
                    <div>Cat</div>
                    <div>In</div>
                    <div>Hat</div>
                </div>
            </div>
        </div>
    </body>
</html>
	
</body>
	
</html>

index.css Raw #

/* Grid Table */
.gridTable {
    display: grid;
    border-collapse: collapse;
    width: 100%;
    grid-template-columns: repeat(3, auto);
    border: #36304a solid 1px;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    margin: 0;
    position: relative;
}

.gridTable > div { /* Table header & body */
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    padding: 0.25em 0;
}

.gridTable > div:first-child { /* Table header */
    align-items: center;
    height: 60px;
    background: #36304a;
    color: #fff;
    padding: 0 8px;
}

.gridTable > div:nth-child(2) { /* Table body */
    display: contents;
}

.gridTable > div:nth-child(2) > * { /* Table body row */
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    padding: 4px;
}

.gridTable > div:nth-child(2) > *:nth-child(odd) { /* Table body row */
    background: #f7f7f7;
}

.gridTable > div:nth-child(2) > *:hover { /* Table body row */
    background-color: #f0f0f0;
}