Aplicando la frontera-radius para arrancar 5 mesa

Question

Estoy tratando de añadir un radio fronterizo a mi mesa de arranque 5.... He hecho algunas investigaciones y muchas de las soluciones dicen envolver la mesa en una div y aplicar el border-radius a ese respecto div. He intentado hacerlo pero el radio fronterizo no tiene efecto en mi mesa. También he intentado agregar la clase de radio fronteriza a la table pero todavía no tiene efecto en la mesa. He aplicado las mismas clases de css a un div y la propiedad fronteriza-radius se aplica como se espera. ¿Cómo puedo aplicar la frontera-radius a mi mesa de arranque? Aquí hay un fragmento de código: .tbl- container { width: 400px; margin-top: 10px; margin-left: 10px;} .bg-red {background-color:red; color:white;} .bdr {border-radius: 6px;} [email protected]/dist/css/bootstrap.min.css  rel= stylesheet /> # First Last Handle 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter TESTING BORDER

logicloom · Accepted Answer

El radio fronterizo está siendo aplicado en el div padre - está desbordando.

Aplicar overflow:hidden al padre de la mesa:

.tbl-container {
  width: 400px;
  margin-top: 10px;
  margin-left: 10px;
}

.bg-red {
  background-color: red;
  color: white;
}

.bdr {
  border-radius: 6px;
  overflow: hidden;
}

[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />



  <== overflow: hidden applied to parent 
  
    
      
        #
        First
        Last
        Handle
      
    
    
      
        1
        Mark
        Otto
        @mdo
      
      
        2
        Jacob
        Thornton
        @fat
      
      
        3
        Larry
        the Bird
        @twitter

Respondida el Dec 18, 2020 a las 02:36 - por logicloom

htmlhelix · Answer

Bootstrap tiene su propia clase de uso.

Gpt · Answer

El problema que estás experimentando se debe a que estás aplicando el border-radius directamente a la tabla (table), pero las tablas en HTML tienen una estructura especial que incluye elementos anidados como thead, tbody, tr, etc. Por lo tanto, el border-radius aplicado a la tabla en sí no surtirá efecto porque se aplica a los bordes del elemento table.

Una forma de solucionar esto es envolver la tabla dentro de un contenedor (div) y aplicar el border-radius a ese contenedor en lugar de a la tabla directamente. Alrededor del div, puedes añadir el radio de borde deseado.

Aquí te dejo una actualización del fragmento de código con esta modificación:

En este caso, la clase bdr se aplica al div que envuelve la tabla (table), lo que te permitirá lograr el efecto de border-radius que deseas.

Espero que esta solución te ayude a resolver el problema y a aplicar el border-radius a tu tabla de inicio.

Respondida el Dec 19, 2020 a las 02:36 - por Gpt

Gemini · Answer

Para aplicar correctamente el radio de borde a la tabla de arranque, debes agregar la clase table-bordered a la etiqueta <table>. Esta clase agrega un borde a todas las celdas de la tabla, lo que permite que el radio de borde tenga efecto.

Aquí tienes el código actualizado con la clase table-bordered añadida:

html

[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>


  
    
      
                First
        Last
        Handle
      
    
    
      
        1
        Mark
        Otto
        @mdo
      
      
        2
        Jacob
        Thornton
        @fat
      
      
        3
        Larry
        the Bird
        @twitter
      
    
  



  
    TESTING BORDER

Con este cambio, el radio de borde se aplicará correctamente a la tabla de arranque.

Respondida el Dec 19, 2020 a las 02:49 - por Gemini

Aplicando la frontera-radius para arrancar 5 mesa

4 Respuestas: