[html] Establecer cellpadding y cellspacing en CSS?



Answers

Defecto

El comportamiento predeterminado del navegador es equivalente a:

table {border-collapse: collapse;}
td    {padding: 0px;}

Cellpadding

Establece la cantidad de espacio entre el contenido de la celda y la pared de la celda

table {border-collapse: collapse;}
td    {padding: 6px;}

Células

Controla el espacio entre las celdas de la tabla

table {border-spacing: 2px;}
td    {padding: 0px;}

Ambos

table {border-spacing: 2px;}
td    {padding: 6px;}

Ambos (especial)

table {border-spacing: 8px 2px;}
td    {padding: 6px;}

Nota: Si hay border-spacing conjunto de border-spacing , indica que la propiedad de border-collapse de la tabla está separate .

¡Inténtalo tú mismo!

Here puede encontrar la antigua forma html de lograr esto.

Question

En una tabla HTML, el cellpadding y el cellpadding cellspacing se puede configurar de esta manera:

<table cellspacing="1" cellpadding="1">

¿Cómo se puede lograr lo mismo con CSS?




Establecer márgenes en las celdas de la tabla realmente no tiene ningún efecto hasta donde yo sé. El verdadero equivalente de CSS para el cellspacing de cellspacing es border-spacing , pero no funciona en Internet Explorer.

Puede usar border-collapse: collapse para establecer de manera confiable el espaciado de celdas en 0 como se mencionó, pero para cualquier otro valor, creo que la única forma de navegación cruzada es seguir usando el atributo de cellspacing .




CSS:

selector{
    padding:0 0 10px 0; // Top left bottom right 
}



Este estilo es para Restablecimiento total para tablas : celdas , celdas y bordes .

Tenía este estilo en mi archivo reset.css:

table{
    border:0;          /* Replace border */
    border-spacing: 0px; /* Replace cellspacing */
    border-collapse: collapse; /* Patch for Internet Explorer 6 and Internet Explorer 7 */
}
table td{
    padding: 0px;/*replace cellpadding*/
}



En una tabla HTML, el cellpadding y el cellpadding cellspacing se puede configurar de esta manera:

Para relleno de celdas : simplemente llame al padding celdas td/th simple

EX:

/******Call-Padding**********/

table { 
    border-collapse: collapse;
}

td { 
  border: 1px solid red;
  padding: 10px;
}
<table>
		<tr>
			<th>Head1 </th>
			<th>Head2 </th>
			<th>Head3 </th>
			<th>Head4 </th>
		</tr>
		<tr>
			<td>11</td>
			<td>12</td>
			<td>13</td>
			<td>14</td>
		</tr>
		<tr>
			<td>21</td>
			<td>22</td>
			<td>23</td>
			<td>24</td>
		</tr>
		<tr> 
			<td>31</td>
			<td>32</td>
			<td>33</td>
			<td>34</td>
		</tr>
		<tr>
			<td>41</td>
			<td>42</td>
			<td>43</td>
			<td>44</td>
		</tr>
	</table>

table { 
    border-collapse: collapse;
}

td { 
  border: 1px solid red;
  padding: 10px;
}

Para espaciamiento celular

Simplemente llame a la table simple border-spacing

EX:

/********* Cell-Spacing   ********/
table { 
    border-spacing: 10px;
    border-collapse: separate;
}

td { 
  border: 1px solid red;
}
<table>
		<tr>
			<th>Head1</th>
			<th>Head2</th>
			<th>Head3</th>
			<th>Head4</th>
		</tr>
		<tr>
			<td>11</td>
			<td>12</td>
			<td>13</td>
			<td>14</td>
		</tr>
		<tr>
			<td>21</td>
			<td>22</td>
			<td>23</td>
			<td>24</td>
		</tr>
		<tr> 
			<td>31</td>
			<td>32</td>
			<td>33</td>
			<td>34</td>
		</tr>
		<tr>
			<td>41</td>
			<td>42</td>
			<td>43</td>
			<td>44</td>
		</tr>
	</table>

/********* Cell-Spacing   ********/
table { 
    border-spacing: 10px;
    border-collapse: separate;
}

td { 
  border: 1px solid red;
}

Más estilo de tabla por enlace fuente CSS aquí obtienes más estilo de tabla por css




Utilicé !important después del colapso del borde como

border-collapse: collapse !important;

y funciona para mí en IE7. Parece anular el atributo de separación de células.




Para aquellos que quieren un valor de espacio de celda distinto de cero, el siguiente CSS funcionó para mí, pero solo puedo probarlo en Firefox. Vea el enlace Quirksmode publicado en otra parte para obtener detalles de compatibilidad. Parece que no funciona con versiones anteriores de Internet Explorer.

table {
    border-collapse: separate;
    border-spacing: 2px;
}



Simplemente usando border-collapse: collapse para su tabla, y padding para th o td




Por lo que entiendo de las clasificaciones W3C es que <table> s son para mostrar datos 'solo'.

Sobre la base de eso, me resultó mucho más fácil crear un <div> con los fondos y todo eso y tener una tabla con datos flotando sobre ella usando position: absolute; y background: transparent; ...

Funciona en Chrome, IE (6 y posterior) y Mozilla (2 y posterior).

Los márgenes se usan (o se usan de todos modos) para crear un espaciador entre los elementos del contenedor, como <table> , <div> y <form> , no <tr> , <td> , <span> o <input> . Usarlo para cualquier elemento que no sea contenedores lo mantendrá ocupado ajustando su sitio web para futuras actualizaciones del navegador.




table{border-spacing:4px; color: #000; background:#ccc; }
td{padding-left:4px;}



¿Qué le parece agregar el estilo directamente a la mesa? Esto es en lugar de usar la table en su CSS, que es un enfoque MALO si tiene varias tablas en su página:

<table style="border-collapse: separate;border-spacing: 2px;">
    <tr>
        <td style="padding: 4px 4px;">Some Text</td>
    </tr>
</table>



Además, si desea cellspacing="0" , no olvide agregar border-collapse: collapse en la hoja de estilos de su table .




td {
    padding: npx; //for cellpadding
    margin: npx; //for cellspacing
    border-collapse: collapse; //for showing borders in a better shape.
}

si el margin no funcionó, intente configurar la display de tr para block y luego el margen funcionará.




Related