超过12列DataTable / Bootstrap

Question

我有一个问题。 我正在做一个DataTable，我想用Bootstrap网格系统设计它以使其响应。 所以，我的表有超过12个cols，当我尝试使用网格系统时，一些信息确实退格或日期被截断：

14-06-
2017

我的表是这样的：

<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>

首先，如果我在class="col-*-*"上放置<th>（其中 - - 是设备和尺寸）不起作用，并且如果我放入<td>不合适。 此外，由于排序箭头，标题会失去对齐。任何帮助将不胜感激。谢谢。

Answer 1

您需要css的空格属性：

https://www.w3schools.com/cssref/pr_text_white-space.asp

t.e。每行的第6个td应为：

<td style="white-space: nowrap;">...</td>

如果您使用的是bootstrap，那么最好使用class text-nowrap ：

https://getbootstrap.com/docs/4.0/utilities/text/#text-wrapping-and-overflow

t.e。每行6t td应为：

<td class="text-nowrap">...</td>

但是在使用带有DataTable的bootstarp后，我建议使用DataTable的属性 columnDefs ：

https://datatables.net/reference/option/columnDefs

t.e：

$('#example').dataTable( {
  "columnDefs": [ {
      "targets": 6,
      "className": "text-nowrap"
    } ]
} );