Table does not break line

Question

Table does not break line

Navigation

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

4

This is the following I am using a site table: DataTables and what is happening is as follows:

AsyoucanseethetextgetsallinlinewhichmakesitdifficulttoreadbecauseyouhavetoscrollmydoubtishowdoImakeautomaticparagraphsorthatthetablebreakstheline.

<divclass="card-block">
   <div class="dt-responsive table-responsive">
        <table id="basic-btn" class="table table-striped table-bordered">
            <thead>
               <tr>
                 <th>ID</th>
                 <th>Nome do Cliente</th>
                 <th>Serial Number</th> 
                 <th>Fabrincante</th>
                 <th>Modelo</th>
                 <th>Avaria</th>
                 <th>Causa</th>
                 <th>Relatório</th>
                 <th>Data</th>
                 <th>Num Obra</th>
                 <th style="min-width:80px;">Ação</th>
               </tr>
           </thead>
           <tbody>
             <tr>
                  <td>1</td>
                  <td>Exemplo/td>
                  <td>Exemplo</td>
                  <td>Exemplo</td>
                  <td>Exemplo</td>
                  <td>Exemplo</td>
                  <td>Exemplo</td>
                  <td style="word-wrap:break-word"> </td>
                  <td>Exemplo</td>
                  <td>Exemplo</td>
                  <td style="vertical-align: middle;">
                     <button type="button" class="btn btn-info edit" data-toggle="modal" data-target="#modalEditar"><i class="fa fa-edit fa-lg"></i></button>
                     <button type="button" data-toggle="modal" data-target="#awesome-modal" class="btn btn-danger md-effect-1 apagar"><i class="fa fa-trash fa-lg"></i></button>
                  </td>
               </tr>
         </tbody>
       </table>
    </div>
 </div>

html jquery tabela

asked by anonymous 23.12.2017 / 03:30

2 answers

1

Just set the table to table-layout:fixed and all td to word-wrap:break-word

Like the DataTables you mentioned, I used the following code for the table:

<table id="example" class="display dataTable dtr-inline" cellspacing="0" width="100%" role="grid" aria-describedby="example_info" style="width: 100%;table-layout:fixed">

Detail for: table-layout:fixed

I've created a style css for td:

<style>
  td{
       word-wrap:break-word;
    }
</style>

Result:

23.12.2017 / 03:54

Modifications in JFreeChart Is it possible to use ng-model with contenteditable?

score 3 · Accepted Answer

You can use white-space to break long strings. Datatables does not have a specific style for this. You can add a CSS on the page to the table by picking up id :

#basic-btn tr td{
    white-space: pre-wrap;
}

Or via jQuery:

$("#basic-btn tr td").css("white-space","pre-wrap");