Ajustar el espacio entre dos filas de una tabla usando CSS

Aquí, vamos a aprender cómo ajustar el espacio entre dos filas de una tabla usando CSS (Cascading Style Sheet)?

partir Nota:

Edición y peinar van de la mano durante el desarrollo de una página web o un sitio web. Mientras se está editando un elemento de su página web o sitio web también debe estilo que elemento de acuerdo con los cambios realizados, esto es necesario para hacer que la apariencia de su página web o sitio web ordenada, además de la página o sitio se convierte estructurado y receptivo. Por lo tanto, hay que conocer algunas propiedades fundamentales de peinar, así como la edición de CSS. Un desarrollador bien tiende a aprender varias propiedades con regularidad y que ayuda en la construcción de un sitio web o web mucho más mejor y que responden a las páginas.

Anécdota:

Ya que estamos hablando de estilo y edición, vamos a echar un vistazo a los efectos de este artículo y tratar de entender cómo podemos ajustar los espacios entre dos filas de una tabla, haciendo uso de CSS. Este método no es en absoluto difícil todo lo que necesita hacer es editar algunos trozos de código y seguramente se puede lograr esto fácilmente sin gran parte del trabajo de salvado de demolición.

Todos hemos tratado con tablas o rejillas, que también se conocen como las redes muchas veces. Se considera una muy buena práctica a las tablas class en su página web o sitio web. Las tablas o rejillas se pueden utilizar include muchos propósitos, for ejemplo, pueden ser utilizados para establecer una comparación o diferenciar entre dos términos, o para proporcionar algunos datos objetivos y mucho más. Además, incluyendo tablas o rejillas también reducen su trabajo de escribir. Por lo tanto, si usted piensa una mesa o rejilla sería suficiente sin tener que escribir todo un párrafo for una determinada pieza de información, a continuación, seguir adelante!

Método:

Ahora que hemos hablado de tablas o rejillas veamos la solución del método que se busca alcanzar.

El espacio entre dos filas se puede ajustar usando espaciado de borde y propiedad border-collapse en CSS .

Dónde propiedad espaciado de borde se utiliza para establecer la distancia entre los bordes de sus células adyacentes y propiedad border-collapse se usa para colapsar las células adyacentes y hacer una frontera común.

Sintaxis:

    Element{
border-collapse:separate;
border-spacing:length;
}

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: separate;
border-spacing: 0 15px;
}
th {
background-color: #ccc;
color: black;
}
th,
td {
width: 160px;
border: 2px solid black;
padding: 4px;
}
</style>
</head>
<body>
<div>
<h3>Adjusting space between two rows in a table</h3>
<table>
<tr>
<th>Roll No.</th>
<th>Name</th>
<th>Gender</th>
</tr>
<tr>
<td class="td">1</td>
<td>Anjali</td>
<td>Female</td>
</tr>
<tr>
<td class="td">2</td>
<td>Hitendra</td>
<td>Male</td>
</tr>
<tr>
<td class="td">3</td>
<td>Nidhi</td>
<td>Female</td>
</tr>
</table>
</div>
</body>
</html>

salida

Adjusting space between two rows in a table using CSS - 4

Por lo tanto en el ejemplo anterior, se puede ver la espaciado entre las células adyacentes de la por encima de la mesa, ya que es un acolchado de 4 píxeles entre cada dos filas.

No es tan difícil ¿verdad? Por lo tanto, haciendo uso de border-collapse y la propiedad border-spacing se puede ajustar el espacio entre dos filas de una tabla usando CSS.


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *