¿Cómo puedo hacer que cada columna sea igual a la otra en el bootstrap 4

Hola a todos Estoy tratando de hacer que el ancho de mis colums sea igual al otro. Quiero que todos los colums sean el mismo ancho excepto para la actualización y eliminación de las columnas. Esos dos deberían permanecer igual que ahora.

Estoy usando bootstrap 4.5.2

Esta es mi mesa de arranque


            }
    

        
            

                Date
                TimeSlot
                Room
                Attendees
                update
                delete
            

        

                
                    

                        Date
                        Time
                        Room
                        invitee

Aquí está mi mesa de arranque en el navegadorHere is my bootstrap table in the browser

Pregunta hecha hace 3 años, 4 meses, 26 días - Por coderconqueror

5 Respuestas:

  • Necesita diferenciar de alguna manera sus columnas de datos de sus columnas de comandos y aplicar su CSS sólo para sus columnas de datos:

    td.table:not(.command) {
    border: 1px solid black;
    width: 15% !important;
}
    
            }
    
    
        
            
    
                Date
                TimeSlot
                Room
                Attendees
                update
                delete
            
    
            

                
                    
    
                        Date
                        Time
                        Room
                        invitee

    Respondida el Dec 19, 2020 a las 14:41 - por codecanvas

    Votos positivos: 0 | Votos negativos: 0

  • Puede quitar la clase de mesa del HTML , luego cambiar a un table-layout:fixed; y finalmente establecer un width como min-content para las últimas 2 células vía :nth-last-child() .

    edición min-content falla con cromo ... utilizar un ancho estático alrededor de 5em .

    todo juntos podría ser (snippet en página completa para ver las dos últimas células no crecen):

    table.fixed {
  table-layout: fixed;
}

table.fixed tr> :nth-last-child(-n+2) {
  /*width: min-content; fails with chrome */
  width:5em;
  color:crimson;/* see me ;) */
  text-align:center;
}
    

 added a custom class named fixed 
  
    
    
    
      Date
      TimeSlot
      Room
      Attendees
      update
      delete
    
    
      

  
    
    
      Date
      Time
      Room
      invitee
      reservationid
      invitedby
      workspace

    Respondida el Dec 19, 2020 a las 14:48 - por codealchemyf00f

    Votos positivos: 0 | Votos negativos: 0

  • Puedes usar las clases incorporadas de bootstrap para esto si usas flexbox. HTML abajo.

    
    
        
    
            Date
            TimeSlot
            Room
            Attendees
        
    
        
    
            update
            delete
        
    
        

    
        
    
            Date
            Time
            Room
            invitee

    Respondida el Dec 19, 2020 a las 14:57 - por devdynamox

    Votos positivos: 0 | Votos negativos: 0

  • Para hacer que cada columna sea igual en ancho en Bootstrap 4, puedes usar las clases de grid. Puedes asignar una clase a cada columna y luego usar las clases de grid de Bootstrap para establecer un ancho igual para todas ellas.

    Aquí te dejo un ejemplo de cómo podrías modificar tu tabla para lograr este objetivo:

    ```html

    Date TimeSlot Room Attendees update delete
    Date TimeSlot Room Attendees