Content of a datatable column does not fit and goes out of the screen

Navigation
0

I have a problem with the contents of the columns of a datatable because it does not fit me, the content that it carries is a long text and at the time of showing it exceeds the size of the screen and does not allow to see the rest of the information .

Thank you very much to anyone who can help.

Below is the script code 

<script>
         $(document).ready(function () {
            $('#grid').dataTable();
         });

</script>

On the other hand, the code that I use to fill the table 

<table id="grid" class="table table-striped table-bordered dt-responsive nowrap">
                          <thead>
                              <tr>
                                  <th>Codigo</th>
                                  <th>Nombre</th>
                                  <th>Misión</th>
                                  <th>Visión</th>
                              </tr>
                          </thead>


                          <tbody id="container">

                           <?php
                                include_once('configuracionbd.php');

                                $query = "SELECT * FROM facultad order by id_facultad ASC";

                                $resultado = mysqli_query($mysqli,$query); 

                                $tabla = "";
                                while($row = mysqli_fetch_array($resultado)){
                                    echo "<tr>";
                                    echo "<td>".$row['id_facultad']."</td>";
                                    echo "<td>".$row['nombre_facultad']."</td>";
                                    echo "<td>".$row['mision_facultad']."</td>";
                                    echo "<td>".$row['vision_facultad']."</td>";
                                    echo "</tr>";

                                 }

                            ?> 
                          </tbody>
                      </table>

And that's how the table on the page shows me now

How do I adjust the text of the mission field and do not overflow the page?

    
asked by Carlos Alberto Guerrero Navarr 27.10.2018 в 02:39
source

2 answers

0

<style>
table {

  overflow-x:auto;
}
table td {
  word-wrap: break-word;
  max-width: 400px;
}
#grid td {
  white-space:inherit;
}
</style>
<table id="grid" class="table table-striped table-bordered dt-responsive nowrap">
                          <thead>
                              <tr>
                                  <th>Codigo</th>
                                  <th>Nombre</th>
                                  <th>Misión</th>
                                  <th>Visión</th>
                                  <th>Visión</th>
                                  <th>Visión</th>
                              </tr>
                          </thead>


                          <tbody id="container">

                           
                            <tr>
                              <td>AAAAAAAAAAAA</td>
                              <td>AAAAAAAAAAAA</td>
                              <td>AAAAAAAAAaaaaaaaaaaaaAAA</td>
                              <td>AAAAAAAAAAAA</td>
                              <td>AAAAAAAAAAAA</td>
                              <td>AAAAAAAAAAAA</td>
                            </tr>
                          </tbody>

</table>
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>

<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js" >
</script>
                      
    <script>
        $(document).ready(function () {
            $('#grid').dataTable();
         });

</script>

use the function style overflow-x:auto; Although that type of data always takes a lot of text, it is recommended that you use the php function. 

  $co=substr("aa112233455678899",0,10);
    echo "$co";

that prints the first 10 letters

    
answered by 27.10.2018 / 05:05
source
0

If you want you can do it with css, placing table-layout in fixed and placing the columns word-wrap: break-word, something like this: 

table {
  table-layout:fixed;
}
table td {
  word-wrap: break-word;
  max-width: 400px;
}
#grid td {
  white-space:inherit;
}
    
answered by 27.10.2018 в 04:31
Can not add or update to child row: a foreign key constraint fails MYSQL WITH C # Firebase Messaging Service, Error with Firebase, the application installed several times