超过 12 列 DataTable/Bootstrap答案

【问题标题】：More than 12 columns DataTable/Bootstrap超过 12 列 DataTable/Bootstrap
【发布时间】：2017-07-12 11:53:32
【问题描述】：

我有一个问题。我正在做一个 DataTable，我想使用 Bootstrap 网格系统对其进行样式设置，以使其具有响应性。所以，我的表有超过 12 列，当我尝试使用网格系统时，一些信息会退格或日期被截断：

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> 上不起作用，如果我把@ 987654327@ 不适合。此外，由于排序箭头，标题会失去对齐。任何帮助将不胜感激。谢谢你。

【问题讨论】：

你想要超过 12 列的引导程序吗？
真正的问题是什么？
如果 bootstrap 有 12 列的 DataTable，我怎样才能做一个 13 列的表响应和有效？
您不能将.col-*-* 用作附加到表列的类。您必须在每个单元格中创建一个完整的网格结构（即<td><div class="row"><div class="col-md-2">A</div>...），此时您正在使用一个表格作为布局结构。
我有一个 div class="row" 并且在它里面我有一个表，上面提到的结构。谢谢你的回答

标签： html twitter-bootstrap datatables

【解决方案1】：

你需要css的white-space属性：

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

t.e.每行的第 6 个 td 应该是：

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

如果您使用的是引导程序，那么最好使用类 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"
    } ]
} );

【讨论】：