More than 12 columns DataTable/Bootstrap - html

Question

I have a question.
I'm doing a DataTable and I want to style it with Bootstrap grid system for make it responsive.
So, my Table has more than 12 cols and when I try to use the grid system, some info does backspace or dates goes truncated:
14-06-
2017
My table is something like this:
<table>
<thead>
<tr>
<th>ID</th>
<th>Descripción</th>
<th>Responsable</th>
<th>Estado</th>
<th style="display:none">Pos.</th>
<th >Inicio</th>
<th>Finalización</th>
<th style="display:none">F. estim.</th>
<th>Tiempo</th>
<th >Puesto de Trabajo</th>
<th>Responsable proceso</th>
<th>Nº Oportunidad</th>
<th>Archivo</th>
</tr>
</thead>
<tbody>
<tr>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td hidden>...</td>
<td>...</td>
<td>...</td>
<td hidden>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
</tbody>
</table>
First of all, it doesn't work well if I put class="col-*-*" (where -- are device and size) on <th> doesn't work, and if I put in <td> doesn't fit.
Also, headers lose alignment because of the sort arrows. Any help will be appreciated. Thank you.

Answer 1

You need css's white-space property:
https://www.w3schools.com/cssref/pr_text_white-space.asp
t.e. 6th td on each row should be:
<td style="white-space: nowrap;">...</td>
If you are using bootstrap, then it could be better to use class text-nowrap:
https://getbootstrap.com/docs/4.0/utilities/text/#text-wrapping-and-overflow
t.e. 6t td on each row should be:
<td class="text-nowrap">...</td>
But after you are using bootstarp with DataTable i recommend to use DataTable's property columnDefs:
https://datatables.net/reference/option/columnDefs
t.e.:
$('#example').dataTable( {
"columnDefs": [ {
"targets": 6,
"className": "text-nowrap"
} ]
} );