He estado tratando de hacer que este funcione en base a preguntas/respuestas similares, pero no he tenido éxito.
Este es mi intento de arreglar el ancho de la columna estableciendo explícitamente el ancho de cada columna, ¡pero nada cambia!
<thead style="white-space: nowrap"> <tr> <th style="width: 1%" class="text-center">ClientID</th> <th style="width: 2%" class="text-center">Task Nº</th> <th style="width: 25%" class="text-center">Task</th> <th style="width: 4%" class="text-center">Date Assigned</th> <th style="width: 4%" class="text-center">Link To File</th> <th style="width: 22%" class="text-center">Notes</th> <th style="width: 14%" class="text-center">Approval</th> <th style="width: 26%" class="text-center">Comments</th> </tr> </thead>Aquí está el violín si tienes ganas de echar una mano. ¡Gracias!
Aquí está
En el violín, la fila en el cuerpo de la tabla tiene css en línea que hace que el ancho de la columna sea el mismo para todos, a 160 px. Tienes que quitar eso. Puede usar la clase col-1, etc. para especificar el ancho de columna de la tabla.
<div id="search-results" class="table-responsive"> <table class="table table-sm table-striped" id="dtable" style="font-size:0.9em"> <thead style="white-space: nowrap"> <tr> <th class="text-center col-1">ClientID</th> <th class="text-center col-1">Task Nº</th> <th class="text-center col-2">Task</th> <th class="text-center col-1">Date Assigned</th> <th class="text-center col-1">Link To File</th> <th class="text-center col-1">Notes</th> <th class="text-center col-2">Approval</th> <th class="text-center col-3">Comments</th> </tr> </thead> <tbody> <tr> <td class="align-middle" style="word-wrap: break-word;text-align:center">AA001</td> <td class="align-middle" style="word-wrap: break-word;text-align:center">4</td> <td class="align-middle" style="word-wrap: break-word;text-align:center">Review and approve content recommendations</td> <td class="align-middle" style="word-wrap: break-word;text-align:center">5/19/2022</td> <td class="align-middle" style="word-wrap: break-word;text-align:center"></td> <td class="align-middle" style="word-wrap: break-word;text-align:center">fafdaa</td> <td class="text-center" style="align-middle"><select class="text-center" name="D1" style="border-radius: 0.2rem"> <option value="empty"></option> <option value="Approved">Approved</option> <option value="Discuss">Discuss</option> <option value="Rejected">Rejected</option> </select></td> <td><input type="text" name="comments" style="width:99%;"></td> </tr> </tbody> </table> </div>