I've created a mockup of design in Photoshop and now I want to make a 'working' mockup version using HTML and CSS. I'm looking for advice on the best way to approach this.
The image mockup is below (ignore the green arrows on the right of the table);
The design itself is basically a table with a fixed left-hand column and scrollable center content.
I've tried to replicate a basic version of this using data tables and bootstrap, see link here and a working snippet below.
$(document).ready(function() {
var table = $('#example').DataTable( {
scrollY: "300px",
scrollX: true,
scrollCollapse: true,
paging: false,
fixedColumns: true,
sorting: false
} );
} );<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Bootstrap jquery dataTable fixed columns</title>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css'>
<link rel='stylesheet' href='https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css'>
<link rel='stylesheet' href='https://cdn.datatables.net/fixedcolumns/3.3.0/css/fixedColumns.bootstrap4.min.css'>
</head>
<body>
<!-- partial:index.partial.html -->
<div class="container" style="width:80%">
<table id="example" class="table table-striped table-bordered nowrap" style="width:100%">
<thead>
<tr>
<th>Room</th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>Room Name</td>
<td>12am</td>
<td>1am</td>
<td>2am</td>
<td>3am</td>
<td>4am</td>
<td>5am</td>
<td>6am</td>
<td>7am</td>
<td>8am</td>
<td>9am</td>
<td>10am</td>
<td>11am</td>
<td>12pm</td>
<td>1pm</td>
<td>2pm</td>
<td>3pm</td>
<td>4pm</td>
<td>5pm</td>
<td>6pm</td>
<td>7pm</td>
<td>8pm</td>
<td>9pm</td>
<td>10pm</td>
<td>11pm</td>
</tr>
<tr>
<td>Room Name</td>
<td>12am</td>
<td>1am</td>
<td>2am</td>
<td>3am</td>
<td>4am</td>
<td>5am</td>
<td>6am</td>
<td>7am</td>
<td>8am</td>
<td>9am</td>
<td>10am</td>
<td>11am</td>
<td>12pm</td>
<td>1pm</td>
<td>2pm</td>
<td>3pm</td>
<td>4pm</td>
<td>5pm</td>
<td>6pm</td>
<td>7pm</td>
<td>8pm</td>
<td>9pm</td>
<td>10pm</td>
<td>11pm</td>
</tr>
<tr>
<td>Room Name</td>
<td>12am</td>
<td>1am</td>
<td>2am</td>
<td>3am</td>
<td>4am</td>
<td>5am</td>
<td>6am</td>
<td>7am</td>
<td>8am</td>
<td>9am</td>
<td>10am</td>
<td>11am</td>
<td>12pm</td>
<td>1pm</td>
<td>2pm</td>
<td>3pm</td>
<td>4pm</td>
<td>5pm</td>
<td>6pm</td>
<td>7pm</td>
<td>8pm</td>
<td>9pm</td>
<td>10pm</td>
<td>11pm</td>
</tr>
<tr>
<td>Room Name</td>
<td>12am</td>
<td>1am</td>
<td>2am</td>
<td>3am</td>
<td>4am</td>
<td>5am</td>
<td>6am</td>
<td>7am</td>
<td>8am</td>
<td>9am</td>
<td>10am</td>
<td>11am</td>
<td>12pm</td>
<td>1pm</td>
<td>2pm</td>
<td>3pm</td>
<td>4pm</td>
<td>5pm</td>
<td>6pm</td>
<td>7pm</td>
<td>8pm</td>
<td>9pm</td>
<td>10pm</td>
<td>11pm</td>
</tr>
<tr>
<td>Room Name</td>
<td>12am</td>
<td>1am</td>
<td>2am</td>
<td>3am</td>
<td>4am</td>
<td>5am</td>
<td>6am</td>
<td>7am</td>
<td>8am</td>
<td>9am</td>
<td>10am</td>
<td>11am</td>
<td>12pm</td>
<td>1pm</td>
<td>2pm</td>
<td>3pm</td>
<td>4pm</td>
<td>5pm</td>
<td>6pm</td>
<td>7pm</td>
<td>8pm</td>
<td>9pm</td>
<td>10pm</td>
<td>11pm</td>
</tr>
<tr>
<td>Room Name</td>
<td>12am</td>
<td>1am</td>
<td>2am</td>
<td>3am</td>
<td>4am</td>
<td>5am</td>
<td>6am</td>
<td>7am</td>
<td>8am</td>
<td>9am</td>
<td>10am</td>
<td>11am</td>
<td>12pm</td>
<td>1pm</td>
<td>2pm</td>
<td>3pm</td>
<td>4pm</td>
<td>5pm</td>
<td>6pm</td>
<td>7pm</td>
<td>8pm</td>
<td>9pm</td>
<td>10pm</td>
<td>11pm</td>
</tr>
<tr>
<td>Room Name</td>
<td>12am</td>
<td>1am</td>
<td>2am</td>
<td>3am</td>
<td>4am</td>
<td>5am</td>
<td>6am</td>
<td>7am</td>
<td>8am</td>
<td>9am</td>
<td>10am</td>
<td>11am</td>
<td>12pm</td>
<td>1pm</td>
<td>2pm</td>
<td>3pm</td>
<td>4pm</td>
<td>5pm</td>
<td>6pm</td>
<td>7pm</td>
<td>8pm</td>
<td>9pm</td>
<td>10pm</td>
<td>11pm</td>
</tr>
<tr>
<td>Room Name</td>
<td>12am</td>
<td>1am</td>
<td>2am</td>
<td>3am</td>
<td>4am</td>
<td>5am</td>
<td>6am</td>
<td>7am</td>
<td>8am</td>
<td>9am</td>
<td>10am</td>
<td>11am</td>
<td>12pm</td>
<td>1pm</td>
<td>2pm</td>
<td>3pm</td>
<td>4pm</td>
<td>5pm</td>
<td>6pm</td>
<td>7pm</td>
<td>8pm</td>
<td>9pm</td>
<td>10pm</td>
<td>11pm</td>
</tr>
<tr>
<td>Room Name</td>
<td>12am</td>
<td>1am</td>
<td>2am</td>
<td>3am</td>
<td>4am</td>
<td>5am</td>
<td>6am</td>
<td>7am</td>
<td>8am</td>
<td>9am</td>
<td>10am</td>
<td>11am</td>
<td>12pm</td>
<td>1pm</td>
<td>2pm</td>
<td>3pm</td>
<td>4pm</td>
<td>5pm</td>
<td>6pm</td>
<td>7pm</td>
<td>8pm</td>
<td>9pm</td>
<td>10pm</td>
<td>11pm</td>
</tr>
<tr>
<td>Room Name</td>
<td>12am</td>
<td>1am</td>
<td>2am</td>
<td>3am</td>
<td>4am</td>
<td>5am</td>
<td>6am</td>
<td>7am</td>
<td>8am</td>
<td>9am</td>
<td>10am</td>
<td>11am</td>
<td>12pm</td>
<td>1pm</td>
<td>2pm</td>
<td>3pm</td>
<td>4pm</td>
<td>5pm</td>
<td>6pm</td>
<td>7pm</td>
<td>8pm</td>
<td>9pm</td>
<td>10pm</td>
<td>11pm</td>
</tr>
<tr>
<td>Room Name</td>
<td>12am</td>
<td>1am</td>
<td>2am</td>
<td>3am</td>
<td>4am</td>
<td>5am</td>
<td>6am</td>
<td>7am</td>
<td>8am</td>
<td>9am</td>
<td>10am</td>
<td>11am</td>
<td>12pm</td>
<td>1pm</td>
<td>2pm</td>
<td>3pm</td>
<td>4pm</td>
<td>5pm</td>
<td>6pm</td>
<td>7pm</td>
<td>8pm</td>
<td>9pm</td>
<td>10pm</td>
<td>11pm</td>
</tr>
<tr>
<td>Room Name</td>
<td>12am</td>
<td>1am</td>
<td>2am</td>
<td>3am</td>
<td>4am</td>
<td>5am</td>
<td>6am</td>
<td>7am</td>
<td>8am</td>
<td>9am</td>
<td>10am</td>
<td>11am</td>
<td>12pm</td>
<td>1pm</td>
<td>2pm</td>
<td>3pm</td>
<td>4pm</td>
<td>5pm</td>
<td>6pm</td>
<td>7pm</td>
<td>8pm</td>
<td>9pm</td>
<td>10pm</td>
<td>11pm</td>
</tr>
<tr>
<td>Room Name</td>
<td>12am</td>
<td>1am</td>
<td>2am</td>
<td>3am</td>
<td>4am</td>
<td>5am</td>
<td>6am</td>
<td>7am</td>
<td>8am</td>
<td>9am</td>
<td>10am</td>
<td>11am</td>
<td>12pm</td>
<td>1pm</td>
<td>2pm</td>
<td>3pm</td>
<td>4pm</td>
<td>5pm</td>
<td>6pm</td>
<td>7pm</td>
<td>8pm</td>
<td>9pm</td>
<td>10pm</td>
<td>11pm</td>
</tr>
<tr>
<td>Room Name</td>
<td>12am</td>
<td>1am</td>
<td>2am</td>
<td>3am</td>
<td>4am</td>
<td>5am</td>
<td>6am</td>
<td>7am</td>
<td>8am</td>
<td>9am</td>
<td>10am</td>
<td>11am</td>
<td>12pm</td>
<td>1pm</td>
<td>2pm</td>
<td>3pm</td>
<td>4pm</td>
<td>5pm</td>
<td>6pm</td>
<td>7pm</td>
<td>8pm</td>
<td>9pm</td>
<td>10pm</td>
<td>11pm</td>
</tr>
<tr>
<td>Room Name</td>
<td>12am</td>
<td>1am</td>
<td>2am</td>
<td>3am</td>
<td>4am</td>
<td>5am</td>
<td>6am</td>
<td>7am</td>
<td>8am</td>
<td>9am</td>
<td>10am</td>
<td>11am</td>
<td>12pm</td>
<td>1pm</td>
<td>2pm</td>
<td>3pm</td>
<td>4pm</td>
<td>5pm</td>
<td>6pm</td>
<td>7pm</td>
<td>8pm</td>
<td>9pm</td>
<td>10pm</td>
<td>11pm</td>
</tr>
<tr>
<td>Room Name</td>
<td>12am</td>
<td>1am</td>
<td>2am</td>
<td>3am</td>
<td>4am</td>
<td>5am</td>
<td>6am</td>
<td>7am</td>
<td>8am</td>
<td>9am</td>
<td>10am</td>
<td>11am</td>
<td>12pm</td>
<td>1pm</td>
<td>2pm</td>
<td>3pm</td>
<td>4pm</td>
<td>5pm</td>
<td>6pm</td>
<td>7pm</td>
<td>8pm</td>
<td>9pm</td>
<td>10pm</td>
<td>11pm</td>
</tr>
<tr>
<td>Room Name</td>
<td>12am</td>
<td>1am</td>
<td>2am</td>
<td>3am</td>
<td>4am</td>
<td>5am</td>
<td>6am</td>
<td>7am</td>
<td>8am</td>
<td>9am</td>
<td>10am</td>
<td>11am</td>
<td>12pm</td>
<td>1pm</td>
<td>2pm</td>
<td>3pm</td>
<td>4pm</td>
<td>5pm</td>
<td>6pm</td>
<td>7pm</td>
<td>8pm</td>
<td>9pm</td>
<td>10pm</td>
<td>11pm</td>
</tr>
<tr>
<td>Room Name</td>
<td>12am</td>
<td>1am</td>
<td>2am</td>
<td>3am</td>
<td>4am</td>
<td>5am</td>
<td>6am</td>
<td>7am</td>
<td>8am</td>
<td>9am</td>
<td>10am</td>
<td>11am</td>
<td>12pm</td>
<td>1pm</td>
<td>2pm</td>
<td>3pm</td>
<td>4pm</td>
<td>5pm</td>
<td>6pm</td>
<td>7pm</td>
<td>8pm</td>
<td>9pm</td>
<td>10pm</td>
<td>11pm</td>
</tr>
<tr>
<td>Room Name</td>
<td>12am</td>
<td>1am</td>
<td>2am</td>
<td>3am</td>
<td>4am</td>
<td>5am</td>
<td>6am</td>
<td>7am</td>
<td>8am</td>
<td>9am</td>
<td>10am</td>
<td>11am</td>
<td>12pm</td>
<td>1pm</td>
<td>2pm</td>
<td>3pm</td>
<td>4pm</td>
<td>5pm</td>
<td>6pm</td>
<td>7pm</td>
<td>8pm</td>
<td>9pm</td>
<td>10pm</td>
<td>11pm</td>
</tr>
<tr>
<td>Room Name</td>
<td>12am</td>
<td>1am</td>
<td>2am</td>
<td>3am</td>
<td>4am</td>
<td>5am</td>
<td>6am</td>
<td>7am</td>
<td>8am</td>
<td>9am</td>
<td>10am</td>
<td>11am</td>
<td>12pm</td>
<td>1pm</td>
<td>2pm</td>
<td>3pm</td>
<td>4pm</td>
<td>5pm</td>
<td>6pm</td>
<td>7pm</td>
<td>8pm</td>
<td>9pm</td>
<td>10pm</td>
<td>11pm</td>
</tr>
<tr>
<td>Room Name</td>
<td>12am</td>
<td>1am</td>
<td>2am</td>
<td>3am</td>
<td>4am</td>
<td>5am</td>
<td>6am</td>
<td>7am</td>
<td>8am</td>
<td>9am</td>
<td>10am</td>
<td>11am</td>
<td>12pm</td>
<td>1pm</td>
<td>2pm</td>
<td>3pm</td>
<td>4pm</td>
<td>5pm</td>
<td>6pm</td>
<td>7pm</td>
<td>8pm</td>
<td>9pm</td>
<td>10pm</td>
<td>11pm</td>
</tr>
<tr>
<td>Room Name</td>
<td>12am</td>
<td>1am</td>
<td>2am</td>
<td>3am</td>
<td>4am</td>
<td>5am</td>
<td>6am</td>
<td>7am</td>
<td>8am</td>
<td>9am</td>
<td>10am</td>
<td>11am</td>
<td>12pm</td>
<td>1pm</td>
<td>2pm</td>
<td>3pm</td>
<td>4pm</td>
<td>5pm</td>
<td>6pm</td>
<td>7pm</td>
<td>8pm</td>
<td>9pm</td>
<td>10pm</td>
<td>11pm</td>
</tr>
<tr>
<td>Room Name</td>
<td>12am</td>
<td>1am</td>
<td>2am</td>
<td>3am</td>
<td>4am</td>
<td>5am</td>
<td>6am</td>
<td>7am</td>
<td>8am</td>
<td>9am</td>
<td>10am</td>
<td>11am</td>
<td>12pm</td>
<td>1pm</td>
<td>2pm</td>
<td>3pm</td>
<td>4pm</td>
<td>5pm</td>
<td>6pm</td>
<td>7pm</td>
<td>8pm</td>
<td>9pm</td>
<td>10pm</td>
<td>11pm</td>
</tr>
<tr>
<td>Room Name</td>
<td>12am</td>
<td>1am</td>
<td>2am</td>
<td>3am</td>
<td>4am</td>
<td>5am</td>
<td>6am</td>
<td>7am</td>
<td>8am</td>
<td>9am</td>
<td>10am</td>
<td>11am</td>
<td>12pm</td>
<td>1pm</td>
<td>2pm</td>
<td>3pm</td>
<td>4pm</td>
<td>5pm</td>
<td>6pm</td>
<td>7pm</td>
<td>8pm</td>
<td>9pm</td>
<td>10pm</td>
<td>11pm</td>
</tr>
<tr>
<td>Room Name</td>
<td>12am</td>
<td>1am</td>
<td>2am</td>
<td>3am</td>
<td>4am</td>
<td>5am</td>
<td>6am</td>
<td>7am</td>
<td>8am</td>
<td>9am</td>
<td>10am</td>
<td>11am</td>
<td>12pm</td>
<td>1pm</td>
<td>2pm</td>
<td>3pm</td>
<td>4pm</td>
<td>5pm</td>
<td>6pm</td>
<td>7pm</td>
<td>8pm</td>
<td>9pm</td>
<td>10pm</td>
<td>11pm</td>
</tr>
<tr>
<td>Room Name</td>
<td>12am</td>
<td>1am</td>
<td>2am</td>
<td>3am</td>
<td>4am</td>
<td>5am</td>
<td>6am</td>
<td>7am</td>
<td>8am</td>
<td>9am</td>
<td>10am</td>
<td>11am</td>
<td>12pm</td>
<td>1pm</td>
<td>2pm</td>
<td>3pm</td>
<td>4pm</td>
<td>5pm</td>
<td>6pm</td>
<td>7pm</td>
<td>8pm</td>
<td>9pm</td>
<td>10pm</td>
<td>11pm</td>
</tr>
<tr>
<td>Room Name</td>
<td>12am</td>
<td>1am</td>
<td>2am</td>
<td>3am</td>
<td>4am</td>
<td>5am</td>
<td>6am</td>
<td>7am</td>
<td>8am</td>
<td>9am</td>
<td>10am</td>
<td>11am</td>
<td>12pm</td>
<td>1pm</td>
<td>2pm</td>
<td>3pm</td>
<td>4pm</td>
<td>5pm</td>
<td>6pm</td>
<td>7pm</td>
<td>8pm</td>
<td>9pm</td>
<td>10pm</td>
<td>11pm</td>
</tr>
<tr>
<td>Room Name</td>
<td>12am</td>
<td>1am</td>
<td>2am</td>
<td>3am</td>
<td>4am</td>
<td>5am</td>
<td>6am</td>
<td>7am</td>
<td>8am</td>
<td>9am</td>
<td>10am</td>
<td>11am</td>
<td>12pm</td>
<td>1pm</td>
<td>2pm</td>
<td>3pm</td>
<td>4pm</td>
<td>5pm</td>
<td>6pm</td>
<td>7pm</td>
<td>8pm</td>
<td>9pm</td>
<td>10pm</td>
<td>11pm</td>
</tr>
<tr>
<td>Room Name</td>
<td>12am</td>
<td>1am</td>
<td>2am</td>
<td>3am</td>
<td>4am</td>
<td>5am</td>
<td>6am</td>
<td>7am</td>
<td>8am</td>
<td>9am</td>
<td>10am</td>
<td>11am</td>
<td>12pm</td>
<td>1pm</td>
<td>2pm</td>
<td>3pm</td>
<td>4pm</td>
<td>5pm</td>
<td>6pm</td>
<td>7pm</td>
<td>8pm</td>
<td>9pm</td>
<td>10pm</td>
<td>11pm</td>
</tr>
<tr>
<td>Room Name</td>
<td>12am</td>
<td>1am</td>
<td>2am</td>
<td>3am</td>
<td>4am</td>
<td>5am</td>
<td>6am</td>
<td>7am</td>
<td>8am</td>
<td>9am</td>
<td>10am</td>
<td>11am</td>
<td>12pm</td>
<td>1pm</td>
<td>2pm</td>
<td>3pm</td>
<td>4pm</td>
<td>5pm</td>
<td>6pm</td>
<td>7pm</td>
<td>8pm</td>
<td>9pm</td>
<td>10pm</td>
<td>11pm</td>
</tr>
<tr>
<td>Room Name</td>
<td>12am</td>
<td>1am</td>
<td>2am</td>
<td>3am</td>
<td>4am</td>
<td>5am</td>
<td>6am</td>
<td>7am</td>
<td>8am</td>
<td>9am</td>
<td>10am</td>
<td>11am</td>
<td>12pm</td>
<td>1pm</td>
<td>2pm</td>
<td>3pm</td>
<td>4pm</td>
<td>5pm</td>
<td>6pm</td>
<td>7pm</td>
<td>8pm</td>
<td>9pm</td>
<td>10pm</td>
<td>11pm</td>
</tr>
<tr>
<td>Room Name</td>
<td>12am</td>
<td>1am</td>
<td>2am</td>
<td>3am</td>
<td>4am</td>
<td>5am</td>
<td>6am</td>
<td>7am</td>
<td>8am</td>
<td>9am</td>
<td>10am</td>
<td>11am</td>
<td>12pm</td>
<td>1pm</td>
<td>2pm</td>
<td>3pm</td>
<td>4pm</td>
<td>5pm</td>
<td>6pm</td>
<td>7pm</td>
<td>8pm</td>
<td>9pm</td>
<td>10pm</td>
<td>11pm</td>
</tr>
<tr>
<td>Room Name</td>
<td>12am</td>
<td>1am</td>
<td>2am</td>
<td>3am</td>
<td>4am</td>
<td>5am</td>
<td>6am</td>
<td>7am</td>
<td>8am</td>
<td>9am</td>
<td>10am</td>
<td>11am</td>
<td>12pm</td>
<td>1pm</td>
<td>2pm</td>
<td>3pm</td>
<td>4pm</td>
<td>5pm</td>
<td>6pm</td>
<td>7pm</td>
<td>8pm</td>
<td>9pm</td>
<td>10pm</td>
<td>11pm</td>
</tr>
<tr>
<td>Room Name</td>
<td>12am</td>
<td>1am</td>
<td>2am</td>
<td>3am</td>
<td>4am</td>
<td>5am</td>
<td>6am</td>
<td>7am</td>
<td>8am</td>
<td>9am</td>
<td>10am</td>
<td>11am</td>
<td>12pm</td>
<td>1pm</td>
<td>2pm</td>
<td>3pm</td>
<td>4pm</td>
<td>5pm</td>
<td>6pm</td>
<td>7pm</td>
<td>8pm</td>
<td>9pm</td>
<td>10pm</td>
<td>11pm</td>
</tr>
<tr>
<td>Room Name</td>
<td>12am</td>
<td>1am</td>
<td>2am</td>
<td>3am</td>
<td>4am</td>
<td>5am</td>
<td>6am</td>
<td>7am</td>
<td>8am</td>
<td>9am</td>
<td>10am</td>
<td>11am</td>
<td>12pm</td>
<td>1pm</td>
<td>2pm</td>
<td>3pm</td>
<td>4pm</td>
<td>5pm</td>
<td>6pm</td>
<td>7pm</td>
<td>8pm</td>
<td>9pm</td>
<td>10pm</td>
<td>11pm</td>
</tr>
<tr>
<td>Room Name</td>
<td>12am</td>
<td>1am</td>
<td>2am</td>
<td>3am</td>
<td>4am</td>
<td>5am</td>
<td>6am</td>
<td>7am</td>
<td>8am</td>
<td>9am</td>
<td>10am</td>
<td>11am</td>
<td>12pm</td>
<td>1pm</td>
<td>2pm</td>
<td>3pm</td>
<td>4pm</td>
<td>5pm</td>
<td>6pm</td>
<td>7pm</td>
<td>8pm</td>
<td>9pm</td>
<td>10pm</td>
<td>11pm</td>
</tr>
</tbody>
</table>
</div>
<!-- partial -->
<script src='https://code.jquery.com/jquery-3.3.1.js'></script>
<script src='https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js'></script>
<script src='https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js'></script>
<script src='https://cdn.datatables.net/fixedcolumns/3.3.0/js/dataTables.fixedColumns.min.js'></script><script src="./script.js"></script>
</body>
</html>I was hoping I could recreate this design using <div>s within the table cells, and style them using CSS. I've read this question already but it's quite old and I'm wondering if things have moved on since that answers?
- Would this be valid HTML?
- Can anyone see any issues or a better way of creating this in HTML / CSS?
Note I will be using Bootstrap, HTML, and CSS. Not necessarily DataTables.
