imagenes - tablas en html ejemplos
¿Espacio entre dos filas en una tabla? (24)
¿Es esto posible a través de CSS?
Lo estoy intentando
tr.classname {
border-spacing: 5em;
}
en vano. Tal vez estoy haciendo algo mal?
Aquí esto funciona sin problemas:
#myOwnTable td { padding: 6px 0 6px 0;}
Supongo que podrías elaborar un diseño más detallado especificando cuál td si es necesario.
Eche un vistazo al colapso del borde: atributo separado (predeterminado) y la propiedad de border-spacing del border-spacing .
Primero, debe separarlos con el colapso de borde , luego puede definir el espacio entre columnas y filas con espacio entre bordes .
Ambas propiedades de CSS son realmente compatibles con todos los navegadores, consulte aquí .
table {border-collapse: separate; border-spacing: 10px 20px;}
table,
table td,
table th {border: 1px solid black;}
<table>
<tr>
<td>Some text - 1</td>
<td>Some text - 1</td>
</tr>
<tr>
<td>Some text - 2</td>
<td>Some text - 2</td>
</tr>
<tr>
<td>Some text - 3</td>
<td>Some text - 3</td>
</tr>
</table>
En la tabla principal, intente configurar
border-collapse:separate;
border-spacing:5em;
Más una declaración de borde, y ver si esto logra el efecto deseado. Sin embargo, tenga en cuenta que IE no admite el modelo de "bordes separados".
Es necesario establecer border-collapse: separate; en la mesa; la mayoría de las hojas de estilo predeterminadas del navegador comienzan en el border-collapse: collapse; , que se deshace del espacio entre bordes.
Además, el espacio entre bordes: va en el TD , no en el TR .
Tratar:
<html><head><style type="text/css">
#ex { border-collapse: separate; }
#ex td { border-spacing: 1em; }
</style></head><body>
<table id="ex"><tr><td>A</td><td>B</td></tr><tr><td>C</td><td>D</td></tr></table>
</body>
Funciona para los últimos navegadores en 2015. Solución simple. No funciona para ser transparente, pero a diferencia de la respuesta de Thoronwen, no puedo hacer que el renderizado sea transparente en cualquier tamaño.
tr {
border-bottom:5em solid white;
}
Has probado:
tr.classname { margin-bottom:5em; }
Alternativamente, cada td también se puede ajustar:
td.classname { margin-bottom:5em; }
o
td.classname { padding-bottom:5em; }
La forma correcta de dar espacio a las tablas es usar el relleno de celda y el espacio de celda, por ejemplo,
<table cellpadding="4">
Me doy cuenta de que esta es una respuesta a un hilo antiguo y puede que no sea la solución solicitada, pero aunque todas las soluciones sugeridas no hicieron lo que necesitaba, esta solución funcionó para mí.
Tenía 2 celdas de tabla, una con color de fondo y otra con un color de borde. Las soluciones anteriores eliminan el borde, por lo que la celda de la derecha parece estar flotando en el aire. La solución que hizo el truco fue reemplazar la table , tr y td con divs y las clases correspondientes: table sería div id="table_replacer" , tr sería div class="tr_replacer" y td sería div class="td_replacer" (Cambia las etiquetas de cierre a divs también)
Para obtener la solución para mi problema, el css es:
#table_replacer{display:table;}
.tr_replacer {border: 1px solid #123456;margin-bottom: 5px;}/*DO NOT USE display:table-row! It will destroy the border and the margin*/
.td_replacer{display:table-cell;}
Espero que esto ayude a alguien.
Me topé con esto mientras luchaba con un problema similar. He encontrado que la respuesta de Varun Natraaj es bastante útil, pero en su lugar usaría un borde transparente.
td { border: 1em solid transparent; }
Los bordes transparentes aún tienen ancho.
Necesitas usar relleno en tus elementos td . Algo como esto debería hacer el truco. Por supuesto, puede obtener el mismo resultado utilizando un relleno superior en lugar de un relleno inferior.
En el código CSS a continuación, el signo mayor que significa que el relleno solo se aplica a los elementos td que son elementos spaceUnder directos a los elementos tr con la clase spaceUnder . Esto permitirá utilizar tablas anidadas. (Las celdas C y D en el código de ejemplo). No estoy muy seguro acerca de la compatibilidad del navegador con el selector secundario directo (piense en IE 6), pero no debería dividir el código en ningún navegador moderno.
/* Apply padding to td elements that are direct children of the tr elements with class spaceUnder. */
tr.spaceUnder>td {
padding-bottom: 1em;
}
<table>
<tbody>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr class="spaceUnder">
<td>C</td>
<td>D</td>
</tr>
<tr>
<td>E</td>
<td>F</td>
</tr>
</tbody>
</table>
Esto debería ser algo así:
+---+---+
| A | B |
+---+---+
| C | D |
| | |
+---+---+
| E | F |
+---+---+
No puedes cambiar el margen de una celda de tabla. Pero puedes cambiar el relleno. Cambie el relleno del TD, que hará que la celda sea más grande y empuje el texto hacia un lado con el relleno aumentado. Sin embargo, si tiene líneas de borde, no será exactamente lo que desea.
O simplemente agregue un espacio en blanco con la altura del margen entre las filas que desea agregar el espaciado
Ok tu puedes hacer
tr.classname td {background-color:red; border-bottom: 5em solid white}
Asegúrese de que el color de fondo esté establecido en la td en lugar de en la fila. Esto debería funcionar en la mayoría de los navegadores ... (Chrome, es decir, & ff probado)
Para crear una ilusión de espaciado entre filas, aplique color de fondo a la fila y luego cree un borde grueso con color blanco para que se cree un "espacio" :)
tr
{
background-color: #FFD700;
border: 10px solid white;
}
Puede intentar agregar fila separadora:
html:
<tr class="separator" />
css:
table tr.separator { height: 10px; }
Puede llenar los elementos <td /> con elementos <div />, y aplicar cualquier margen a los divs que desee. Para un espacio visual entre las filas, puede usar una imagen de fondo que se repite en el elemento <tr />. (Esta fue la solución que acabo de usar hoy, y parece funcionar tanto en IE6 como en FireFox 3, aunque no la probé más).
Además, si eres reacio a modificar el código de tu servidor para poner <div /> s dentro de <td /> s, puedes usar jQuery (o algo similar) para envolver dinámicamente el contenido de <td /> en a <div / >, lo que le permite aplicar el CSS como se desee.
Puedes usar la línea de altura en la tabla:
<table style="width: 400px; line-height:50px;">
Simplemente coloque div en el td y configure los siguientes estilos de div:
margin-bottom: 20px;
height: 40px;
float: left;
width: 100%;
Tiene una tabla con álbumes de identificación con cualquier dato ... He omitido trs y tds
<table id="albums" cellspacing="0">
</table>
En el css:
table#albums
{
border-collapse:separate;
border-spacing:0 5px;
}
Una respuesta demasiado tarde :)
Si aplica elementos flotantes a tr , puede espaciar entre dos filas con el atributo de margin .
table tr{
float: left
width: 100%;
}
tr.classname {
margin-bottom:5px;
}
haciendo esto se muestra arriba ...
table tr{ float: left width: 100%; } tr.classname { margin-bottom:5px; }
elimina la alineación de la columna vertical, así que ten cuidado de cómo lo usas
ya que tengo una imagen de fondo detrás de la mesa, fingir con un relleno blanco no funcionaría. Opté por poner una fila vacía entre cada fila de contenido:
<tr class="spacer"><td></td></tr>
luego use css para dar a las filas espaciadoras una cierta altura y un fondo transparente.
Desde la Red de Desarrolladores de Mozilla :
La propiedad CSS de espaciado de bordes especifica la distancia entre los bordes de las celdas adyacentes (solo para el modelo de bordes separados). Esto es equivalente al atributo de espacio de celdas en el HTML de presentación, pero se puede usar un segundo valor opcional para establecer un espaciado horizontal y vertical diferente.
Esa última parte es a menudo supervisada. Ejemplo:
.your-table {
border-collapse: separate; /* allow spacing between cell borders */
border-spacing: 0 5px; /* NOTE: syntax is <horizontal value> <vertical value> */
ACTUALIZAR
Ahora entiendo que el OP quiere que las filas específicas y separadas tengan un mayor espacio. He agregado una configuración con elementos tbody que logra eso sin arruinar la semántica. Sin embargo, no estoy seguro de si es compatible con todos los navegadores. Lo hice en cromo.
El siguiente ejemplo es para mostrar cómo puede hacer que se vea como si la tabla existiera de filas separadas, dulzura de CSS completa. También le dio más espacio a la primera fila con la configuración de tbody . Siéntase libre de usar!
Aviso de soporte: IE8 +, Chrome, Firefox, Safari, Opera 4+
.spacing-table {
font-family: ''Helvetica'', ''Arial'', sans-serif;
font-size: 15px;
border-collapse: separate;
table-layout: fixed;
width: 80%;
border-spacing: 0 5px; /* this is the ultimate fix */
}
.spacing-table th {
text-align: left;
padding: 5px 15px;
}
.spacing-table td {
border-width: 3px 0;
width: 50%;
border-color: darkred;
border-style: solid;
background-color: red;
color: white;
padding: 5px 15px;
}
.spacing-table td:first-child {
border-left-width: 3px;
border-radius: 5px 0 0 5px;
}
.spacing-table td:last-child {
border-right-width: 3px;
border-radius: 0 5px 5px 0;
}
.spacing-table thead {
display: table;
table-layout: fixed;
width: 100%;
}
.spacing-table tbody {
display: table;
table-layout: fixed;
width: 100%;
border-spacing: 0 10px;
}
<table class="spacing-table">
<thead>
<tr>
<th>Lead singer</th>
<th>Band</th>
</tr>
</thead>
<tbody>
<tr>
<td>Bono</td>
<td>U2</td>
</tr>
</tbody>
<tbody>
<tr>
<td>Chris Martin</td>
<td>Coldplay</td>
</tr>
<tr>
<td>Mick Jagger</td>
<td>Rolling Stones</td>
</tr>
<tr>
<td>John Lennon</td>
<td>The Beatles</td>
</tr>
</tbody>
</table>
tr {
display: block;
margin-bottom: 5px;
}