Este es un comportamiento predeterminado de las celdas de la tabla en el que hay algo de espacio entre sus bordes. Para eliminar este espacio, podemos usar la propiedad de colapso de borde CSS . Esta propiedad se usa para establecer los bordes de la celda presente dentro de la tabla e indica si estas celdas compartirán un borde común o no.
Sintaxis:
border-collapse: collapse;
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>
Remove cellspacing from tables using CSS
</title>
<!-- border-collapse CSS property -->
<style>
table, td, th {
border: 2px solid black;
}
#collapseTable {
border-collapse: collapse;
}
</style>
</head>
<body>
<h2>
Before using the border Collapsing Property
</h2>
<table id = "separateTable">
<tr>
<th>Author Name</th>
<th>Contact No</th>
</tr>
<tr>
<td>Geek</td>
<td>XXXXXXXXXX</td>
</tr>
<tr>
<td>GFG</td>
<td>XXXXXXXXXX</td>
</tr>
</table>
<h2>
After using the border collapsing Property
</h2>
<table id = "collapseTable">
<tr>
<th>Author Name</th>
<th>Contact No</th>
</tr>
<tr>
<td>Geek</td>
<td>XXXXXXXXXX</td>
</tr>
<tr>
<td>GFG</td>
<td>XXXXXXXXXX</td>
</tr>
</table>
</body>
</html>
Producción
Los navegadores compatibles se enumeran a continuación:
- Google Chrome
- explorador de Internet
- Firefox
- Ópera
Publicación traducida automáticamente
Artículo escrito por ManasChhabra2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA