1

no consigo redondear los bordes de una tabla html simplemente quiero redondear los dos bordes superiores pero se me hace imposible.

Esto es lo que estoy usando:

.ejemplo {
  border: 1px solid #a7a7a7;
  border-radius: 5px 5px 0px 0px;
  -moz-border-radius: 5px 5px 0px 0px;
  -webkit-border-radius: 5px 5px 0px 0px;
}
<table class="ejemplo">
  <tr>
    <td>
      Prueba
    </td>
  </tr>
  <tr>
    <td>
      Prueba
    </td>
  </tr>
</table>

7
  • 1
    ¿Podrías poner el HTML de la tabla a la que tratas de dar estilo? Viendo tan el CSS es imposible determinar que te puede estar fallando
    – phpMyGuel
    Commented el 16 nov. 2018 a las 14:55
  • si ahora mismo, listo
    – jorge
    Commented el 16 nov. 2018 a las 15:33
  • ¿Alguna hoja de estilo que estés utilizando? He probado un snippet y funciona correctamente.
    – Gibrán
    Commented el 16 nov. 2018 a las 15:35
  • 2
    Tu código funciona bien, como se puede ver en el ejecutable. Por favor, crea un ejemplo mínimo verificable para que podamos ver el problema en la propia pregunta.
    – Alvaro Montoro
    Commented el 16 nov. 2018 a las 15:36
  • En qué navegador pruebas?
    – Alfabravo
    Commented el 16 nov. 2018 a las 15:45

2 respuestas 2

2

creo que tu problema es con las clases por defecto que trae el elemento. podrías intentar agregando !important al final de cada estilo. algo asi:

.ejemplo{
  border: 1px solid #a7a7a7 !important;
  border-radius: 5px 5px 0px 0px !important;
  -moz-border-radius: 5px 5px 0px 0px !important;
  -webkit-border-radius: 5px 5px 0px 0px !important;
}
4
  • lo he probado y nada, el border por ejemplo funciona es solo el redondear lo que no y por cierto no funciona con el borde pero si conotras cosa..
    – jorge
    Commented el 16 nov. 2018 a las 15:26
  • El ejemplo original funciona correctamente, parece ser que se tienen algunos elementos adicionales que faltan mencionar a @jorge.
    – Gibrán
    Commented el 16 nov. 2018 a las 15:38
  • 2
    Se considera una mala práctica usar en exceso la regla !important. El usuario A. Cedano nos da una explicación muy detallada de su uso, pueden verla aquí: es.stackoverflow.com/a/203733/83304 Commented el 16 nov. 2018 a las 15:44
  • puede ser que uso Blade ? o no debe influir?
    – jorge
    Commented el 16 nov. 2018 a las 17:43
0

Puedes intentar de esta manera:

table {
  border-collapse: collapse;
  border-radius: 1em;
  overflow: hidden;
}

th, td {
  padding: 1em;
  background: #ddd;
  border-bottom: 2px solid white; 
}

body {
  margin: 1.5em;
}
<table>
  <thead>
    <tr>
      <td>
        Nombre
      </td>
      <td>
        Edad
      </td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        Mario
      </td>
      <td>
        55
      </td>
    </tr>
    <tr>
      <td>
        Juan
      </td>
      <td>
        20
      </td>
    </tr>
  </tbody>
</table>

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.