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

Asked

Viewed 3,449 times

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 is always the same size even if you have to cut the inserted text in it. Look at the code I’ve made.

<!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>
css

3 answers

2

You can do a text break from your td with the CSS properties

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

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

In this Codepen I changed your code so that all td were with the same value, in case, 100px and when passing the mouse, would expand displaying all 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>

  • It looks pretty cool Victor

  • 1

    @hugocsl thanks Hugo, very good to receive this feedback from you! : D We kind of ended up doing pretty much the same thing in our answers :P

  • Mano I really liked what you did but would there be some way to leave the text with more content ? 'Cause it sits on one line and it doesn’t look very pretty rsrs.

  • For nothing Young, got very creative. He keeps jumping between a cell with more content and another, but not all are flowers in CSS rss. Try to copy the code you made in Codepen and put here in the Stackoverflow Snipper that gets even better! If you can’t tell me I’ll edit your answer with the code there

  • @Luccafernandes fear that leaving with more content, with two lines for example, only with CSS would not be possible... What you could do to leave more content would be to increase the size a little max-width. Maybe if you wanted something more elaborate, you would have to go for a solution with Javascript

  • @hugocsl Ready! Really now it’s easier! Thanks again! : ) Feel free to edit if you find something that can improve!

  • Got it, helped me a lot, thank you XD

Show 2 more comments

1

With pure CSS I think you won’t get the effect, so I suggest a pure Javascript solution. Follow the steps below:

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

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

Then use the CSS below. I’ve included some lines and changed some of your original CSS. You can compare to see what’s changed. Basically it was removing the spacing of the p and others related to div maid.

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>

  • 1

    Dude I need to learn JS urgent rss

  • If you learn JS how to draw CSS we are chipped rs.

  • Guy I am a designer in a development company, js would help me very professionally I believe. I see that answer is up to inspection 2x if that hahaha. Then I will use your answers as a study object because it helps a lot in the front-end that is where I want to go. Tmj

  • Mano It helped more, I think I’ll be able to solve my problem, I just wish that in times of using a onmousemove, would be more feasible an onclick, in Ima of an object like "Read More...".

  • Ah yes. I will adapt the answer... just a moment...

  • See if this resolves: https://jsfiddle.net/rj167dcL/

Show 1 more comment

0

I warn you, it didn’t look good. Nor elegant rss. But as I do not know your situation I will answer with what I understood of the question and how I managed to do with CSS. I hope it helps you.

You won’t get much going trying to stir up at the time of Tabela, But by working on the div that is outside the table you can. Look at the example and notice that I put the effects on div .pai and not in the table. For the father I can leave smaller than the internal content, already the table nay...

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>

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.