0
214
Vistas¿Cómo hago para que una tabla html no tenga columnas dinámicas que cambien de tamaño dependiendo de la cantidad de datos en un <td>?
Estoy tratando de crear una tabla que tenga columnas del mismo tamaño que no cambien según la longitud de los datos de la tabla.
En la imagen, los datos bajo el encabezado "Título" mueven la segunda columna más hacia la derecha en comparación con las otras tablas donde "Título" es más corto. Este comportamiento no es deseado, pero parece ser el predeterminado.
Intenté rellenar la primera columna pero no cambia el comportamiento en absoluto. ¿Cómo puedo lograr un tamaño fijo que no aleje otras columnas?
Aquí hay un código de ejemplo que da el comportamiento no deseado
<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; padding: 5px; } table { border-spacing: 15px; } </style> </head> <body> <h2>Border Spacing</h2> <p>Border spacing specifies the space between the cells.</p> <table style="width:100%"> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> <tr> <td>John</td> <td>Doe</td> <td>80</td> </tr> </table> </body> </html>Intenté establecer el ancho en la tabla y sus columnas, y también rellenar la tabla, pero no funciona.
2 Respuestas
Responde la pregunta0
Con Bootstrap 4.0 puede usar las clases de utilidades de dimensionamiento para anchos:
<thead> <tr> <th class="w-25">25</th> <th class="w-50">50</th> <th class="w-25">25</th> </tr> </thead> También puede usar d-inline-block para evitar la configuración predeterminada de display:flex .
0
Lo resolví usando style="table-layout:fixed" en la tabla y usando bootstrap cols en los encabezados de la tabla.