1

Quero diminuir o tamanha dessa tabela mas o titulo (os horarios) fixa o tamanho dela ali entao eu queria joga o titulos em pe para timinur o espaço da tabela

    $('#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>
    <div class="">
        <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>

6
  • não entendi bem como seria o "em pé", seria cada hora numa linha é isso? Commented 11/06/2018 às 17:05
  • 2
    Possível duplicata de Como fazer rotacionar uma div?
    – Woss
    Commented 11/06/2018 às 17:08
  • nao usando esse codigo dele. ele roda mas a celula ainda continua do mesmo tamanho Commented 11/06/2018 às 17:14
  • sim tipo quero q elas fiquem em pe ou na diagonal para que as celulas de baixo ocupem menis espaço e com isto diminuir a tabela Commented 11/06/2018 às 17:15
  • Vc pode diminuir a largura alterando o texto. Por exemplo, quando a hora não tiver minutos, coloque apenas 13h. Já economiza 2 caracteres em cada. Poderia tb diminuir um pouco o tamanho da fonte.
    – Sam
    Commented 11/06/2018 às 17:32

1 Resposta 1

1

Pode usar a propriedade writing-mode (veja documentação), mas ela não é aplicável a células da tabela. Você teria que inserir o texto em um elemento como uma div, span etc. Inclua os textos em spans:

                                  ↓           ↓
<th horario="08:00" scope="col"><span>08:00</span></th>

E use o CSS abaixo para aplicar:

th[scope="col"] span{
   writing-mode: vertical-lr;
}

Exemplo:

$('#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;
}

th[scope="col"] span{
   writing-mode: vertical-lr;
}
<!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>
    <div class="">
        <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"><span>08:00</span></th> <!-- '<--' Note que eu to passando um atributo horario aqui  -->
                <th horario="08:30" scope="col"><span>08:30</span></th>
                <th horario="09:00" scope="col"><span>09:00</span></th>
                <th horario="09:30" scope="col"><span>09:30</span></th>
                <th horario="10:00" scope="col"><span>10:00</span></th>
                <th horario="10:30" scope="col"><span>10:30</span></th>
                <th horario="11:00" scope="col"><span>11:00</span></th>
                <th horario="11:30" scope="col"><span>11:30</span></th>
                <th horario="12:00" scope="col"><span>12:00</span></th>
                <th horario="12:30" scope="col"><span>12:30</span></th>
                <th horario="13:00" scope="col"><span>13:00</span></th>
                <th horario="13:30" scope="col"><span>13:30</span></th>
                <th horario="14:00" scope="col"><span>14:00</span></th>
                <th horario="14:30" scope="col"><span>14:30</span></th>
                <th horario="15:00" scope="col"><span>15:00</span></th>
                <th horario="15:30" scope="col"><span>15:30</span></th>
                <th horario="16:00" scope="col"><span>16:00</span></th>
                <th horario="16:30" scope="col"><span>16:30</span></th>
                <th horario="17:00" scope="col"><span>17:00</span></th>
                <th horario="17:30" scope="col"><span>17:30</span></th>
                <th horario="18:00" scope="col"><span>18:00</span></th>
                <th horario="15:30" scope="col"><span>18:30</span></th>
                <th horario="19:00" scope="col"><span>19:00</span></th>
                <th horario="19:30" scope="col"><span>19:30</span></th>
                <th horario="20:00" scope="col"><span>20:00</span></th>
            </tr>
        </thead>
        <tbody  class="table" id="filhos">
            <tr>

            </tr>
        </tbody>
    </table>

</body>


</html>

3
  • vlw amigo era isso mesmo que queria Commented 11/06/2018 às 18:02
  • isso que voce usou eu consigo usar em uma tabela do plugin datatable do jquery , sem fazer com que o datatable perde as confg Commented 11/06/2018 às 19:05
  • 1
    Cara, não sei dizer ao certo. Se o plugin já não tiver algo próprio pra isso, talvez um JavaScript resolveria. Mas não tenho certeza não.
    – Sam
    Commented 11/06/2018 às 19:07

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .