Comment corriger la largeur du tableau dans DataTables

Lorsque le tableau comporte de nombreuses colonnes, il peut être nécessaire de fixer la largeur du tableau. La largeur par défaut de 100 % ne convient plus. La largeur par défaut est de 100 %. Si vous souhaitez modifier la taille de la fenêtre à 100 %, ajoutez width="100%" à l'élément de table. Quant à la raison pour laquelle le CSS à 100 % ne prend pas effet, la raison est inconnue. Parlons de la façon de définir une largeur fixe pour les tables de données.

Code 1.html

<div id="tableArea"><table id="userTable" class="display table table-bordered" cellspacing="0" ><thead><tr><th style="display: none">ck</th><th>序号</th><th>账号</th><th>姓名</th><th>CPID</th><th>CP名称</th><th>操作</th></tr></thead></table></div>

2. Remplacer certains styles (nos styles ont une priorité élevée, ils remplaceront donc ceux intégrés). in Style)

#tableArea .dataTables_wrapper {position: relative;clear: both;zoom: 1;overflow-x: auto;
}#tableArea table{width: 800px;
}

Le overflow-x:auto ici est nouveau, ce qui signifie qu'une fois que le contenu du tableau dépasse la largeur, une barre de défilement horizontale apparaîtra ; la table doit être codée en dur, directement L'écriture sur l'élément table ne prend pas effet, la raison est inconnue.

3. Définir la largeur de la colonne (facultatif)

"columns": [

　　　　{ "data": "number", "orderable": false ,,"searchable": false}
]

4. lors de la navigation Lorsque la fenêtre du navigateur est inférieure à 800 pixels, des barres de défilement horizontales apparaissent sur le tableau, ce qui est exactement le résultat souhaité.

5. Pourquoi ne pas utiliser la configuration "scrollX":true pour implémenter la barre de défilement horizontale ? L'interrogation de la page Web affichée a révélé qu'elle divisait le tableau en deux tableaux, l'un représentant l'en-tête du tableau et l'autre représentant le corps du tableau. Ce n'est pas ce que je souhaite, et si le contenu de son en-tête est dépassé, il sera masqué.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!