How to limit the size of a td so that regardless of the text you have, the heigth does not increase

Navigation
0

Good afternoon, I have a Table where I need to put different texts in it, so the size of the TD is different, there is some way to make the TD always the same size even if you have to cut the text inserted in it. Look at the code I've already done. 

<!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>
    
asked by anonymous 16.05.2018 / 21:15

3 answers

1

You can make a text wrapping of your td with CSS properties 

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

In this way, the text inside your td will be shortened and "..." will be added.

In this CodePen I changed your code so that all td would have the same value, in this case, 100px and when hovering, it would expand displaying the entire text. 

        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>
    
16.05.2018 / 21:26
1

With pure CSS I think you will not get the effect, so I suggest a solution in pure JavaScript. Follow the steps below:

First include the TD text in two tags: div and p , like this: 

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

Then use the CSS below. I included some lines and changed others from your original CSS. You can compare to see what has changed. Basically it was to remove the spacing of p and other related to% created_%. 

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;
}

Now include the script below that will do all the control of the effect and necessary adjustments: 

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";
   });

}

Let's see it working (preferably run in full screen): 

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>
    
16.05.2018 / 22:33
0

I'll tell you it did not look pretty. Neither elegant rss. But as I do not know your situation I will respond with what I understood the question and how I managed to do with CSS. I hope it helps you.

You will not get much of it trying to tinker with Tabela , but by moving the div that is off the table you can. See the example and notice that I put the effects on div .pai and not on the table. Because the parent I can leave smaller than the internal content, already table not ... 

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>
    
16.05.2018 / 21:36
Increase by 2 when activating function How to do sum in javascript