Foros aprenderaprogramar.com
Aprender a programar => C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más => Mensaje iniciado por: kukuxumusu en 06 de Junio 2017, 19:57
-
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:
<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!
-
Hola kukusumusu
Este código es el que hace que no se vea el borde correctamente:
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
-
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 ;)
-
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