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>