Abbreviate content inside cell (HTML table)

Question

Abbreviate content inside cell (HTML table)

Navigation

#1 by (1 votes)
#2 by (1 votes)
#3 by (0 votes)

1

I have a table that is made up of values that are pulled from the database ....

This table has the predefined size, and it happens that when the pulled value of the bank is larger than the cell, it resizes and messes everything up ...

Example:

IwanttoknowifIcandothis:

Code

<divclass="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>
        ......

Has anyone ever needed anything like this?

Solution formulated with the help of 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;
}

html table redimensionamento

asked by anonymous 08.09.2015 / 16:31

3 answers

1

The simplest solution is to use only CSS, in the case a combination of display , white-space , overflow and text-overflow

The JavaScript function is only used to copy the text from the cell to the title property of the cell, so that the user can read the text in full by moving the mouse over the cell.

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>

08.09.2015 / 17:28

0

I was searching the same subject, as I am using AngularJs, it was very easy, I'll leave it if anyone needs it, I used a filter of the angular, the limitTo, then I used ng-if, for q if you have more qx characters, show "...":

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

The result looks like this:

24.04.2017 / 01:27

Problem creating reportviewer in asp.net mvc How to batch update with PHP and MySQL

score 1 · Accepted Answer

You have to set fixed sizes for the columns. It's the only way. In percentage or pixel.

But if you want to abbreviate the content, use a function that limits your string.

In PHP it is 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"
?>

link