0

Boa tarde, Tenho uma Table onde preciso colocar diferentes textos nela, sendo assim o tamanho das TD ficam diferente, tem alguma forma de fazer com que a TD fica sempre do mesmo tamanho mesmo que tenha que corta o texto inserido nela. Olhem o código que já fiz.

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="utf-8"/>
    <title>Teste01</title>
    <style>
    table{
        float: right;
        margin: 50px 300px auto 0px;
        width: 65%;
        }

        th{
         border: 0px solid #ffffff;
         color: #ffffff;
         text-align: center;
         font-family: Verdana, Arial, Helvetica;
         font-size: 14px;
         text-align: center;
         background-color: #007cc2;
        }
        td {
        border: 3px solid #ffffff;
        color: #5d5d5d;
        font-size: 14px;
        font-weight: normal;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        background-color: #efeeee;
        text-align: center;
        table-layout: fixed;
        height: 100px;
        transition: height 0.4s;
        }

        td:hover {
            height: 200px;
        }
    </style>
</head>
<body>
    <div>
        <table>
            <tr>    
            <th>Publicação</th>
            <th>Abertura</th>
            <th>Obejeto</th>
            <th>Editar</th>
            <th>Comunicado</th>
            <th>ATA</th>

            <tr>
                <td>13/04/2018</td>
                <td>    26/04/2018   14:00</td>
                <td>Contratação de empresa para fornecimento de: equipamentos hidraúlicos, em atendimento a solicitação do engenheiro quimico, conforme specificado no TERMO DE REFERÊNCIA – (ANEXO I). </td>
                <td>ARQUIVO</td>
                <td>Aguardando Publicação</td>
                <td>Aguardando Publicação</td>


            </tr>   
            </tr>
        </table>
    </div>

</body>
</html>
0

3 Respostas 3

2

Você pode fazer uma quebra de texto de sua td com as propriedades CSS

td {
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

Desta forma, o texto dentro de sua td será encurtada e será adicionado " ... ".

Neste CodePen alterei seu código para que todas as td ficassem com o mesmo valor, no caso, 100px e quando passar o mouse, expandiria exibindo todo o texto.

        th{
         border: 0px solid #ffffff;
         color: #ffffff;
         text-align: center;
         font-family: Verdana, Arial, Helvetica;
         font-size: 14px;
         text-align: center;
         background-color: #007cc2;
        }
        td {
        border: 3px solid #ffffff;
        color: #5d5d5d;
        font-size: 14px;
        font-weight: normal;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        background-color: #efeeee;
        text-align: center;
        table-layout: fixed;
        height: 100px;
        transition: height 0.4s;
        /*propriedade desejada*/
          max-width: 100px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          transition: all ease 0.7s;
        }

        td:hover {
            height: 200px;
            max-width: 100px;
            overflow: auto;
            text-overflow: ellipsis;
            white-space: initial;
        }
<div>
        <table>
            <tr>    
            <th>Publicação</th>
            <th>Abertura</th>
            <th>Obejeto</th>
            <th>Editar</th>
            <th>Comunicado</th>
            <th>ATA</th>
            </tr>

            <tr>
                <td>13/04/2018</td>
                <td>    26/04/2018   14:00</td>
                <td>Contratação de empresa para fornecimento de: equipamentos hidraúlicos, em atendimento a solicitação do engenheiro quimico, conforme specificado no TERMO DE REFERÊNCIA – (ANEXO I). </td>
                <td>ARQUIVO</td>
                <td>Aguardando Publicação</td>
                <td>Aguardando Publicação</td>


            </tr>   
        </table>
    </div>

7
  • Ficou bem legal Victor
    – hugocsl
    Commented 16/05/2018 às 19:42
  • 1
    @hugocsl obrigado Hugo, muito bom receber esse feedback de você! :D Meio que acabamos fazendo praticamente a mesma coisa em nossas respostas :P Commented 16/05/2018 às 19:44
  • Mano Gostei muito do que fez mas teria alguma forma de deixa o texto com mais conteudo ? Pois ele fica somento em uma linha e isso não fica muito bonito rsrs. Commented 16/05/2018 às 19:51
  • Por nada Jovem, ficou bem criativo. Ele fica dando uns pulos entre uma célula com mais conteúdo e outra, mas nem tudo são flores no CSS rss. Tenta copiar o código que vc fez no Codepen e coloca aqui no Snipper do StackOverflow que fica ainda melhor! Se vc não conseguir me fala que eu edito sua resposta com o código de lá
    – hugocsl
    Commented 16/05/2018 às 19:59
  • @LuccaFernandes receio que deixar com mais conteúdo, com duas linhas por exemplo, apenas com CSS não seria possivel... O que daria para fazer para deixar mais conteudo seria aumentar um pouco o tamanho no max-width. Talvez se quisesse algo mais elaborado, teria que partir para uma solução com Javascript Commented 16/05/2018 às 20:03
1

Com CSS puro creio que não conseguirá o efeito, por isso sugiro uma solução em JavaScript puro. Siga os passos abaixo:

Primeiro inclua o texto da TD em duas tags: div e p, desta forma:

<td><div><p>Contratação de empresa para fornecimento<p></div></td>

Em seguida use o CSS abaixo. Incluí algumas linhas e alterei outras do seu CSS original. Você pode comparar para ver o que foi alterado. Basicamente foi retirar o espaçamento do p e outros relacionados à div criada.

table{
   float: right;
   margin: 50px 300px auto 0px;
   width: 65%;
}

th{
   border: 0px solid #ffffff;
   color: #ffffff;
   text-align: center;
   font-family: Verdana, Arial, Helvetica;
   font-size: 14px;
   text-align: center;
   background-color: #007cc2;
}

td{
   border: 3px solid #ffffff;
   color: #5d5d5d;
   font-size: 14px;
   font-weight: normal;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   background-color: #efeeee;
   text-align: center;
   table-layout: fixed;
}

td div{
   height: 50px;
   overflow: hidden;
   transition: height 0.4s;
}

table tr td p{
   margin: 0;
   position: relative;
}

Agora inclua o script abaixo que fará todo o controle do efeito e ajustes necessários:

var tds = document.querySelectorAll("tr:not(:first-child)"); // seleciona todas as TRs menos a primeira
var normalHeight = 50; // altura padrão (mesmo que no height do CSS -> td div)
for(var x=0; x<tds.length; x++){

   var ps = tds[x].querySelector(":nth-child(3) p"); // selecione todos os parágrafos da 3ª coluna

   // centralizo apenas os que forem menor que a altura padrão
   if(ps.offsetHeight < normalHeight){
      ps.style.cssText = "top: 50%; transform: translateY(-50%);";
   }

   // aumenta a div ao passar o mouse na TR
   tds[x].addEventListener("mouseover", function(){
      var tdDiv = this.querySelector("td:nth-child(3) p");
      var divHeight = tdDiv.offsetHeight;
      if(divHeight > normalHeight) tdDiv.parentNode.style.height = divHeight+"px";
   });

   // volta ao normal ao retirar o mouse da TR
   tds[x].addEventListener("mouseleave", function(){
      var tdDiv = this.querySelector("td:nth-child(3) p");
      tdDiv.parentNode.style.height = normalHeight+"px";
   });

}

Vamos ver funcionando (de preferência, execute em tela cheia):

var tds = document.querySelectorAll("tr:not(:first-child)"); // seleciona todas as TRs menos a primeira
var normalHeight = 50; // altura padrão (mesmo que no height do CSS -> td div)
for(var x=0; x<tds.length; x++){

   var ps = tds[x].querySelector(":nth-child(3) p"); // selecione todos os parágrafos da 3ª coluna

   // centralizo apenas os que forem menor que a altura padrão
   if(ps.offsetHeight < normalHeight){
      ps.style.cssText = "top: 50%; transform: translateY(-50%);";
   }
   
   // aumenta a div ao passar o mouse na TR
   tds[x].addEventListener("mouseover", function(){
      var tdDiv = this.querySelector("td:nth-child(3) p");
      var divHeight = tdDiv.offsetHeight;
      if(divHeight > normalHeight) tdDiv.parentNode.style.height = divHeight+"px";
   });

   // volta ao normal ao retirar o mouse da TR
   tds[x].addEventListener("mouseleave", function(){
      var tdDiv = this.querySelector("td:nth-child(3) p");
      tdDiv.parentNode.style.height = normalHeight+"px";
   });
   
}
table{
   /* comentado para exibição no snippet
   float: right;
   margin: 50px 300px auto 0px; */
   width: 65%;
}

th{
   border: 0px solid #ffffff;
   color: #ffffff;
   text-align: center;
   font-family: Verdana, Arial, Helvetica;
   font-size: 14px;
   text-align: center;
   background-color: #007cc2;
}

td{
   border: 3px solid #ffffff;
   color: #5d5d5d;
   font-size: 14px;
   font-weight: normal;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   background-color: #efeeee;
   text-align: center;
   table-layout: fixed;
}

td div{
   height: 50px;
   overflow: hidden;
   transition: height 0.4s;
}

table tr td p{
   margin: 0;
   position: relative;
}
<div>
		<table>
			<tr>	
			<th>Publicação</th>
			<th>Abertura</th>
			<th>Obejeto</th>
			<th>Editar</th>
			<th>Comunicado</th>
			<th>ATA</th>

			<tr>
				<td>13/04/2018</td>
				<td>	26/04/2018   14:00</td>
				<td><div><p>Contratação de empresa para fornecimento de: equipamentos hidraúlicos, em atendimento a solicitação do engenheiro quimico, conforme specificado no TERMO DE REFERÊNCIA – (ANEXO I).Contratação de empresa para fornecimento de: equipamentos hidraúlicos.<p></div>	</td>
				<td>ARQUIVO</td>
				<td>Aguardando Publicação</td>
				<td>Aguardando Publicação</td>
			</tr>	
			<tr>
				<td>13/04/2018</td>
				<td>	26/04/2018   14:00</td>
				<td><div><p>Contratação<p></div></td>
				<td>ARQUIVO</td>
				<td>Aguardando Publicação</td>
				<td>Aguardando Publicação</td>
			</tr>	
			<tr>
				<td>13/04/2018</td>
				<td>	26/04/2018   14:00</td>
				<td><div><p>Contratação de empresa para fornecimento de: equipamentos hidraúlicos, em atendimento a solicitação do engenheiro quimico, conforme specificado no TERMO DE REFERÊNCIA – (ANEXO I).Contratação de empresa para fornecimento de: equipamentos hidraúlicos, em atendimento a solicitação do engenheiro quimico, conforme specificado no TERMO DE REFERÊNCIA – (ANEXO I).<p></div>	</td>
				<td>ARQUIVO</td>
				<td>Aguardando Publicação</td>
				<td>Aguardando Publicação</td>
			</tr>	
		</table>
	</div>

6
  • 1
    Cara eu preciso aprender JS urgente rss
    – hugocsl
    Commented 16/05/2018 às 20:37
  • Se tu aprender JS como saca de CSS nós tamo lascado rs.
    – Sam
    Commented 16/05/2018 às 20:48
  • Cara eu sou um designer em uma empresa de desenvolvimento, js me ajudaria muito profissionalmente eu acredito. Eu vejo essas resposta é ate vistoria 2x se desse hahaha. Depois vou usar suas respostas como objeto de estudo pq ajuda muito no front-end que eh pra onde quero ir. Tmj
    – hugocsl
    Commented 16/05/2018 às 21:26
  • Mano Ajudou de mais isso, acho que vou conseguir resolver meu problema, so queria que em vezes de usar um onmousemove, seria mais viavel um onclick, em sima de um objeto tipo "Leia Mais...". Commented 23/05/2018 às 19:16
  • Ah sim. Vou adaptar a resposta... só um instante...
    – Sam
    Commented 23/05/2018 às 19:23
0

Já vou avisando que não ficou bonito. Nem elegante rss. Mas como não sei sua situação vou responder com o que eu entendi da pergunta e como o que consegui fazer com o CSS. Espero que te ajude.

Vc não vai consegui muita coisa tentando mexer na altura da Tabela, Mas mexendo na div que está por fora da tabela vc consegue. Veja o exemplo e repare que coloquei os efeitos na div .pai e não na table. Pois o pai eu consigo deixar menor que o conteúdo interno, já a table não...

table{
    /* float: right;
    margin: 50px 300px auto 0px; */
    width: 65%;
    margin: 0 auto ;
}

th{
    border: 0px solid #ffffff;
    color: #ffffff;
    text-align: center;
    font-family: Verdana, Arial, Helvetica;
    font-size: 14px;
    text-align: center;
    background-color: #007cc2;
}
td {
    border: 3px solid #ffffff;
    color: #5d5d5d;
    font-size: 14px;
    font-weight: normal;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    background-color: #efeeee;
    text-align: center;
    table-layout: fixed;

}
.pai {
    height: 50px;
    transition: height 0.4s;
    overflow: hidden;
    border: 1px solid #007cc2;
}
.pai:hover {
    height: 120px;
    overflow: auto;
}
<div class="pai">
    <table>
        <tr>	
        <th>Publicação</th>
        <th>Abertura</th>
        <th>Obejeto</th>
        <th>Editar</th>
        <th>Comunicado</th>
        <th>ATA</th>
        </tr>
        <tr>
            <td>13/04/2018</td>
            <td>	26/04/2018   14:00</td>
            <td>Contratação de empresa para fornecimento de: equipamentos hidraúlicos, em atendimento a solicitação do engenheiro quimico, conforme specificado no TERMO DE REFERÊNCIA – (ANEXO I).	</td>
            <td>ARQUIVO</td>
            <td>Aguardando Publicação</td>
            <td>Aguardando Publicação</td>
        </tr>	
        
    </table>
</div>
<div class="pai">
    <table>
        <tr>	
        <th>Publicação</th>
        <th>Abertura</th>
        <th>Obejeto</th>
        <th>Editar</th>
        <th>Comunicado</th>
        <th>ATA</th>
        </tr>
        <tr>
            <td>13/04/2018</td>
            <td>	26/04/2018   14:00</td>
            <td>Contratação de empresa para fornecimento de: equipamentos hidraúlicos, em atendimento a solicitação do engenheiro quimico, conforme specificado no TERMO DE REFERÊNCIA – (ANEXO I).Contratação de empresa para fornecimento de: equipamentos hidraúlicos, em atendimento a solicitação do engenheiro quimico, conforme specificado no TERMO DE REFERÊNCIA – (ANEXO I).	</td>
            <td>ARQUIVO</td>
            <td>Aguardando Publicação</td>
            <td>Aguardando Publicação</td>
        </tr>	
    </table>
</div>

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 .