Autor Tema: Cómo poner esquinas redondeadas tabla CSS HTML border-radius Ejercicio CU01058D  (Leído 3972 veces)

kukuxumusu

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 6
    • Ver Perfil
Buenas tardes! Me ha surgido una duda haciendo el ejercicio CU01058D del curso de fundamentos de programación web con CSS usando Notepad++ como editor, y le he dado vueltas pero no consigo solucionarlo, no logro que se me pongan las dos esquinas derechas bordeadas... Os pego el código para que podáis ver el fallo:

Código: [Seleccionar]
<html>
<head>
<title>Portal web - aprenderaprogramar.com</title> <meta charset="utf-8">
<style>
    table {width:500px; height: 250px; margin: 45px; border-collapse: collapse; background-color: #EFEFEF; ;font-weight: bold; text-align: center; border-radius: 20px;}
   
    th{font-family: sans-serif; font-size: 18px; font-weight: 1000;}
   
    tr td, th { padding: 8px; color: black;  border-left: 1px solid white;}
   
    td:not(.tfootIn), th:not(.tfootIn) {border-bottom: 1px solid #D3D3D3}
    td:not(.tfootIn) {background-image: url(http://i.imgur.com/WX1dBA4.png?1); background-size: 25px; background-repeat: no-repeat; background-position: center}
   
    tr td:last-child {background-color: #d2ffc4;}
    tr th:last-child {background-color: #d2ffc4;}
   
   
    tr .cross {background-image: url(http://www.pngmart.com/files/3/Red-Cross-PNG-Clipart.png); background-size: 30px; background-repeat: no-repeat; background-position: center}
   

</style>

</head>
<body>
    <table>
        <thead>
        <tr> <th>Standard</th> <th>Professional</th> <th>Enterprise</th>
        </tr></thead>
        <tbody>
        <tr> <td> </td> <td></td> <td></td></tr>
        <tr> <td> </td> <td></td> <td></td></tr>
        <tr> <td class="cross"> </td> <td></td> <td></td></tr>
        <tr> <td class="cross"></td> <td class="cross"></td> <td></td></tr></tbody>
        <tfoot><tr>  <td class="tfootIn">$99</td> <td class="tfootIn">$199</td> <td class="tfootIn">$399</td></tr></tfoot>
    </table>

</body>

</html>
Debe de haber algo que anule la propiedad en esos dos lados, pero logro averiguar qué es... Mil gracias de antemano!
« Última modificación: 27 de Junio 2017, 18:48 por Ogramar »

pedro,,

  • Moderador Global
  • Experto
  • *******
  • APR2.COM
  • Mensajes: 1292
    • Ver Perfil
Re:Esquinas redondeadas tabla CSS. border-radius Ejercicio CU01058D
« Respuesta #1 en: 07 de Junio 2017, 09:24 »
Hola kukusumusu


Este código es el que hace que no se vea el borde correctamente:
Código: [Seleccionar]
tr td:last-child {
        background-color: #d2ffc4;
      }
      tr th:last-child {
        background-color: #d2ffc4;
      }

Cuan aplicas radius al borde de la tabla, solo lo estás haciendo al exterior de la tabla sin incluir los elementos que esta contenga, por eso cuando aplicas un color de fondo se ve la forma que realmente tienen esas celdas.

Saludos. ;D

kukuxumusu

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 6
    • Ver Perfil
Re:Esquinas redondeadas tabla CSS. border-radius Ejercicio CU01058D
« Respuesta #2 en: 13 de Junio 2017, 19:04 »
Muchas gracias, Pedro, pero se me plantea otra duda, por qué no sucede lo mismo con las esquinas de la izquierda, si éstas también tienen su background-color y su forma predeterminada?

Disculpa la tardanza, estuve de viaje    ;)

Ogramar

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2660
    • Ver Perfil
Buenas kukuxumusu

Puedes ver otros hilos del foro para comprobar cómo lo han resuelto otras personas, escribiendo el código del ejercicio (CU01058D) en el buscador del foro

En este hilo por ejemplo puedes ver una explicación: https://www.aprenderaprogramar.com/foros/index.php?topic=3234.0

Salu2

 

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".