sirve - tablas en html ejemplos
¿Cómo se especifica el relleno de tablas en CSS?(tabla, no relleno de celda) (11)
CSS realmente no te permite hacer esto a nivel de tabla. En general, especifico cellspacing="3"
cuando quiero lograr este efecto. Obviamente no es una solución CSS, así que tómalo por lo que vale.
Tengo una tabla con un fondo de color y necesito especificar el relleno entre la tabla y su contenido, células de IE.
La etiqueta de la tabla no parece aceptar un valor de relleno.
Firebug muestra el diseño de mesa y cuerpo con relleno 0 pero no acepta ningún valor ingresado para ellos, así que supongo que no tienen la propiedad de relleno.
Pero lo que quiero es que quiera la misma separación entre las células que las celdas superiores con la parte superior de la mesa y las celdas inferiores con la parte inferior de la mesa.
De nuevo, lo que quiero no es un relleno de celdas.
EDITAR: Gracias, lo que realmente necesitaba, me doy cuenta ahora, fue el espacio entre los bordes, o su equivalente html, el espacio de las celdas.
Pero por alguna razón, no hacen nada en el sitio en el que estoy trabajando.
Ambos funcionan muy bien en un HTML separado, pero en el sitio no es así.
Pensé que podría ser un estilo sobrescribir la propiedad, pero el espaciado de las celdas y el espaciado de los bordes en línea no deberían sobrescribirse, ¿verdad?
(Yo uso Firefox)
EDIT 2: No, el relleno TD no es lo que necesito. Con el relleno TD, los rellenos superior e inferior de las celdas adyacentes se suman, por lo que hay el doble de espacio (almohadilla en realidad) entre dos celdas que entre la celda superior y el borde superior de la mesa. Quiero tener exactamente la misma distancia entre ellos.
Con css, una tabla puede tener relleno independientemente de sus celdas.
La propiedad de relleno no es heredada por sus hijos.
Entonces, definiendo:
table {
padding: 5px;
}
Deberia trabajar. También podría decirle específicamente al navegador cómo rellenar (o en este caso, no rellenar) sus celdas.
td {
padding: 0px;
}
EDITAR: No es compatible con IE8. Lo siento.
Es gracioso, estaba haciendo precisamente esto ayer. Solo necesitas esto en tu archivo css
.ablock table td {
padding:5px;
}
luego envuelva la mesa en un div adecuado
<div class="ablock ">
<table>
<tr>
<td>
Esto es lo que debes entender sobre las tablas ... No son un árbol de elementos independientes anidados. Son un solo elemento compuesto. Mientras que los TDs individuales se comportan más o menos como elementos de bloque de CSS, los elementos intermedios (cualquier cosa entre TABLE y TD, incluyendo TRs y TBODYs) son indivisibles y no entran ni en línea ni en bloque . No se permiten elementos HTML aleatorios en ese espacio de otra dimensión, y el tamaño de dicho espacio de otra dimensión no se puede configurar en absoluto a través de CSS. Solo la propiedad de cellspacing
HTML puede llegar a ella, y esa propiedad no tiene análogo en CSS.
Entonces, para resolver su problema, sugeriría una envoltura DIV como sugiere otro afiche, o si absolutamente debe mantenerla en la tabla, tiene esta basura fea:
<style>
.padded tr.first td { padding-top:10px; }
.padded tr.last td { padding-bottom:10px; }
.padded td.first { padding-left:10px; }
.padded td.last { padding-right:10px; }
</style>
<table class=''padded''>
<tr class=''first''>
<td class=''first''>a</td><td>b</td><td class=''last''>c</td>
</tr>
<tr>
<td class=''first''>d</td><td>e</td><td class=''last''>f</td>
</tr>
<tr class=''last''>
<td class=''first''>g</td><td>h</td><td class=''last''>i</td>
</tr>
</table>
Hay otro truco:
/* Padding on the sides of the table */
table th:first-child, .list td:first-child { padding-left: 28px; }
table th:last-child, .list td:last-child { padding-right: 28px; }
(Acabo de verlo en mi trabajo actual)
No puedes ... Tal vez si publicaste una imagen del efecto deseado, hay otra forma de lograrlo.
Por ejemplo, puede envolver toda la tabla en un DIV y establecer el relleno en el div.
Puede establecer un margen para la tabla. Alternativamente, envuelva la tabla en un div y use el relleno de div.
Puede probar la propiedad de espacio entre bordes. Eso debería hacer lo que quieras. Pero es posible que desee ver esta answer .
El método más fácil / mejor soportado es usar <table cellspacing="10">
La manera css: espacio en el borde (no es compatible con IE, no creo)
<!-- works in firefox, opera, safari, chrome -->
<style type="text/css">
table.foobar {
border: solid black 1px;
border-spacing: 10px;
}
table.foobar td {
border: solid black 1px;
}
</style>
<table class="foobar" cellpadding="0" cellspacing="0">
<tr><td>foo</td><td>bar</td></tr>
</table>
Editar: si solo quieres rellenar el contenido de la celda, y no espaciarlo, puedes simplemente usar
<table cellpadding="10">
O
td {
padding: 10px;
}
table {
background: #fff;
box-shadow: 0 0 0 10px #fff;
margin: 10px;
width: calc(100% - 20px);
}
table {
border: 1px solid transparent;
}