Я создал макет дизайна в Photoshop, и теперь я хочу сделать «рабочую» версию макета, используя HTML и CSS. Я ищу совет о том, как лучше всего подойти к этому.
Макет изображения ниже (игнорируйте зеленые стрелки справа от таблицы);
Сам дизайн в основном представляет собой таблицу с фиксированным левым столбцом и прокручиваемым содержимым центра.
Я пытался воспроизвести basi c версия этого с использованием таблиц данных и bootstrap, см. ссылку здесь и рабочий фрагмент ниже.
$(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>
Я надеялся, что смогу воссоздать этот дизайн, используя <div> s в ячейках таблицы, и стилизовать их, используя CSS. Я прочитал этот вопрос уже, но он довольно старый, и мне интересно, если что-то пошло с тех пор, как ответы?
- Это будет действительно HTML?
- Может кто-нибудь увидеть какие-либо проблемы или лучший способ создать это в HTML / CSS?
Примечание. Я буду использовать Bootstrap, HTML и CSS. Не обязательно DataTables.