1

Tenho uma tabela que é composta por valores que são puxados do banco de dados....

Essa tabela tem o tamanho pré-definido, e acontece que quando o valor puxado do banco é maior que a célula, a mesma se redimensiona e bagunça tudo...

Exemplo: inserir a descrição da imagem aqui

Eu quero saber se da pra fazer isso: inserir a descrição da imagem aqui

Código

<div class="tabela-clientes" >
   <table id="mytable">              
      <tr>
         <td style="width: 200px">
            Nome
         </td>
          <td style="width: 200px">
            Empresa
          </td>
          <td style="width: 90px">
            Telefone
          </td>
          <td style="width: 180px;">
             Email
          </td>
          <td style="width: 130px; max-width:130px;">
             Opções
          </td>
        </tr>
        ......

Alguém já precisou de algo parecido?


Solução formulada com a ajuda do Diego Souza

$nome = "{$linha['nome']}";

//conta numero de caracteres da string
$tam = strlen($nome);

//se string tiver mais que 25 caracteres
if($tam > 25){
    //Exibe apenas 25 caracteres
    $rest = substr($nome, 0, 25); 
    echo $rest . "...";
}else{
    echo $nome;
}

3 Respostas 3

1

Você tem que definir tamanhos fixos para as colunas. É o único jeito. Em porcentagem ou pixel.

Mas se quiser abreviar o conteúdo, use uma função que limite sua string.

No PHP é o substr(string, inicial, quantidade).

<?php
$rest = substr("abcdef", 0, -1);  // retorna "abcde"
$rest = substr("abcdef", 2, -1);  // retorna "cde"
$rest = substr("abcdef", 4, -4);  // retorna ""
$rest = substr("abcdef", -3, -1); // retorna "de"
?>

http://php.net/manual/pt_BR/function.substr.php

6
  • Humm, esse método substr é interessante, no caso eu posso contar o numero de caracteres da minha string e se for maior que x, então usarei o metodo substr 8/09/2015 às 14:44
  • Ysso mesmo! Pode ser assim também. 8/09/2015 às 14:44
  • Mas vai acabar não dando certo, pq o tamanho da string pode ser grande....ou muuuuito grande, aí no caso se meu substr estiver definido com -10...vai acabar nao servindo quando a string for muito grande 8/09/2015 às 14:50
  • Tem alguma maneira de eu exibir apenas x caracteres de uma string? Independente de seu tamanho mostrar até 25 caracteres por exemplo... 8/09/2015 às 14:51
  • 1
    Usando o substr mesmo. substr('Essa é uma frase com 36 caracteres !', 0, 25). 8/09/2015 às 14:53
1

A solução mais simples é usar apenas CSS, no caso uma combinação de display, white-space, overflow e text-overflow

A função JavaScript serve apenas para copiar o texto da celula para a propriedade title da celula, desta forma o usuario poderá ler o texto na integra ao passar o mouse sobre a celula.

var truncate = document.querySelectorAll(".truncate");
truncate = [].slice.apply(truncate);
truncate.forEach(function (elemento, indice) {
  elemento.title = elemento.innerHTML;
})
.truncate {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;  
}
<table id="mytable">      
  <thead>
    <tr>
      <th style="width: 200px">
        Nome
      </th>
      <th style="width: 400px">
        Descrição
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="width: 200px">
        Toby Mosque
      </td>
      <td style="width: 400px" class="truncate" title="Hello">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non leo vel dui accumsan pharetra at vel dui. Integer eu volutpat quam, in ornare lectus. Aliquam elit tortor, tincidunt ac magna eget, sagittis pretium metus. Quisque non lorem tincidunt, pulvinar ligula eu, interdum augue. Nulla posuere, diam non feugiat auctor, nunc orci mollis quam, ut tempus orci purus vitae mauris. Pellentesque sodales mauris sed fringilla porta. Nulla pulvinar ipsum turpis, sed vehicula massa viverra lobortis. Integer convallis, dui condimentum tempus gravida, leo nunc mattis dolor, in lacinia velit ligula sit amet enim. Nullam varius facilisis tellus sed rutrum. Morbi auctor mi auctor dolor cursus, ut semper orci elementum. Mauris eget cursus risus. Suspendisse hendrerit luctus odio, non blandit turpis maximus at. Morbi congue augue dui, ut ultrices nisl pretium sit amet. Curabitur in nulla diam. Donec scelerisque lacinia lacinia.      </td>
    </tr>
  </tbody>
</table>

0

estava pesquisando o mesmo assunto, como eu estou usando AngularJs, ficou bem facil, vou deixar aki caso alguem precise, utilizei um filtro do angular, o limiteTo, depois usei o ng-if, para q se tiver mais q x caracteres, mostrar "...":

 <td>{{item.t0031_razao | limitTo : 30 : 0}} <a ng-if="item.t0031_razao.length > 30">...</a> </td>

o resultado ficou assim:

inserir a descrição da imagem aqui

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 .