I want to decrease the size of this table but the title (schedules) fixed the size of it there then I wanted to play the titles in order to timinur the space of the table
$('#inputGroupSelect01').change(function (value) {
var item = ' <tr> '; // inicio a string que tem o meu html
for (var x = 0; x < $('.tabela-horario').children().length; x++) { // Aqui eu faço um for each, nos th da tabela
if ($('.tabela-horario').children()[x].getAttribute('horario') == this.value) { // aqui eu verifico se o value
item += '<td>X</td>'; //do meu select é igual ao meu atributo horario
}
else {
item += '<td></td>';
}
}
item += '</tr>';
$('#filhos').append(item); //adiciono ele na tabela basicao.
});.table {
border:solid 1px;
}
.table td {
border:solid 1px;
}
.table td {
width:4px;
height:1px;
padding:0px 0px 0px 0px;
border:1px solid #CCC;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<script src="main.js"></script>
<link rel="stylesheet" type="text/css" href="estlo.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script></head><body><divclass="">
<div class="d-flex justify-content-center">
<select class="custom-select" id="inputGroupSelect01" style="width: 500px;">
<option selected>Choose...</option>
<option value="08:00">08:00</option>
<option value="08:30">08:30</option>
<option value="09:00">09:00</option>
<option value="09:30">09:30</option>
<option value="10:00">10:00</option>
<option value="10:30">10:30</option>
<option value="11:00">11:00</option>
<option value="11:30">11:30</option>
<option value="12:00">12:00</option>
<option value="12:30">12:30</option>
<option value="13:00">13:00</option>
<option value="13:30">13:30</option>
<option value="14:00">14:00</option>
<option value="14:30">14:30</option>
<option value="15:00">15:00</option>
<option value="15:30">15:30</option>
<option value="16:00">16:00</option>
<option value="16:30">16:30</option>
<option value="17:00">17:00</option>
<option value="17:30">17:30</option>
<option value="18:00">18:00</option>
<option value="18:30">18:30</option>
<option value="19:00">19:00</option>
<option value="19:30">19:30</option>
<option value="20:00">20:00</option>
</select>
</div>
</div>
<table class="table" id="tabela">
<thead>
<tr class="tabela-horario">
<th horario="08:00" scope="col">08:00</th> <!-- '<--' Note que eu to passando um atributo horario aqui -->
<th horario="08:30" scope="col">08:30</th>
<th horario="09:00" scope="col">09:00</th>
<th horario="09:30" scope="col">09:30</th>
<th horario="10:00" scope="col">10:00</th>
<th horario="10:30" scope="col">10:30</th>
<th horario="11:00" scope="col">11:00</th>
<th horario="11:30" scope="col">11:30</th>
<th horario="12:00" scope="col">12:00</th>
<th horario="12:30" scope="col">12:30</th>
<th horario="13:00" scope="col">13:00</th>
<th horario="13:30" scope="col">13:30</th>
<th horario="14:00" scope="col">14:00</th>
<th horario="14:30" scope="col">14:30</th>
<th horario="15:00" scope="col">15:00</th>
<th horario="15:30" scope="col">15:30</th>
<th horario="16:00" scope="col">16:00</th>
<th horario="16:30" scope="col">16:30</th>
<th horario="17:00" scope="col">17:00</th>
<th horario="17:30" scope="col">17:30</th>
<th horario="18:00" scope="col">18:00</th>
<th horario="15:30" scope="col">18:30</th>
<th horario="19:00" scope="col">19:00</th>
<th horario="19:30" scope="col">19:30</th>
<th horario="20:00" scope="col">20:00</th>
</tr>
</thead>
<tbody class="table" id="filhos">
<tr>
</tr>
</tbody>
</table>
</body>
</html>