tablas - title html
Margen de celda CSS (16)
En mi documento HTML, tengo una tabla con dos columnas y múltiples filas. ¿Cómo puedo aumentar el espacio entre la primera y la segunda columna con css? Intenté aplicar "margen-derecho: 10px"; a cada una de las celdas en el lado izquierdo, pero sin ningún efecto.
SOLUCIÓN
Encontré que la mejor manera de resolver este problema era una combinación de prueba y error y leer lo que estaba escrito antes que yo:
Como puedes ver, tengo algunas cosas bastante complicadas pasando ... pero el principal truco para hacer que esto se vea bien es:
ELEMENTO PADRE (UL): colapso del borde: separado; espacio en el borde: .25em; margin-left: -.25em;
ELEMENTOS INFANTILES (LI): display: table-cell; vertical-alinear: medio;
HTML
<ul>
<li><span class="large">3</span>yr</li>
<li>in<br>stall</li>
<li><span class="large">9</span>x<span class="large">5</span></li>
<li>on<br>site</li>
<li>globe</li>
<li>back<br>to hp</li>
</ul>
CSS
ul { border: none !important; border-collapse: separate; border-spacing: .25em; margin: 0 0 0 -.25em; }
li { background: #767676 !important; display: table-cell; vertical-align: middle; position: relative; border-radius: 5px 0; text-align: center; color: white; padding: 0 !important; font-size: .65em; width: 4em; height: 3em; padding: .25em !important; line-height: .9; text-transform: uppercase; }
Esta solución funciona para los td que necesitan border y padding para el estilo.
(Probado en Chrome 32, IE 11, Firefox 25)
CSS:
table {border-collapse: separate; border-spacing:0; } /* separate needed */
td { display: inline-block; width: 33% } /* Firefox need inline-block + width */
td { position: relative } /* needed to make td move */
td { left: 10px; } /* push all 10px */
td:first-child { left: 0px; } /* move back first 10px */
td:nth-child(3) { left: 20px; } /* push 3:rd another extra 10px */
/* to support older browsers we need a class on the td''s we want to push
td.col1 { left: 0px; }
td.col2 { left: 10px; }
td.col3 { left: 20px; }
*/
HTML:
<table>
<tr>
<td class=''col1''>Player</td>
<td class=''col2''>Result</td>
<td class=''col3''>Average</td>
</tr>
</table>
Actualizado 2016
Firefox ahora lo admite sin inline-block y un width establecido
table {border-collapse: separate; border-spacing:0; }
td { position: relative; padding: 5px; }
td { left: 10px; }
td:first-child { left: 0px; }
td:nth-child(3) { left: 20px; }
td { border: 1px solid gray; }
/* CSS table */
.table {display: table; }
.tr { display: table-row; }
.td { display: table-cell; }
.table { border-collapse: separate; border-spacing:0; }
.td { position: relative; padding: 5px; }
.td { left: 10px; }
.td:first-child { left: 0px; }
.td:nth-child(3) { left: 20px; }
.td { border: 1px solid gray; }
<table>
<tr>
<td>Player</td>
<td>Result</td>
<td>Average</td>
</tr>
</table>
<div class="table">
<div class="tr">
<div class="td">Player</div>
<div class="td">Result</div>
<div class="td">Average</div>
</div>
</div>
Intente padding-right . No puedes poner margin entre celdas.
<table>
<tr>
<td style="padding-right: 10px;">one</td>
<td>two</td>
</tr>
</table>
Me doy cuenta de que esto es bastante tardío, pero para el registro, también puede usar selectores CSS para hacer esto (eliminando la necesidad de estilos en línea). Este CSS aplica relleno a la primera columna de cada fila:
table > tr > td:first-child { padding-right:10px }
¡Y este sería tu HTML, sin CSS !:
<table><tr><td>data</td><td>more data</td></tr></table>
Esto permite un marcado mucho más elegante, especialmente en los casos en los que necesita hacer muchos formatos específicos con CSS.
No puede seleccionar columnas individuales en una celda de esa manera. En mi opinión, su mejor opción es agregar un style=''padding-left:10px'' en la segunda columna y aplicar los estilos en un div interno o elemento. De esta forma puedes lograr la ilusión de un espacio mayor.
Puedes usar ambos:
padding-right:10px;
padding-right:10%;
Pero es mejor usar con % .
Si el relleno no funciona para usted, otra solución es agregar columnas adicionales y establecer un ancho por ancho usando <colgroup> . Ninguna de las soluciones de relleno anteriores funcionaba para mí ya que estaba tratando de dar un margen a la frontera de la celda, y esto es lo que resolvió el problema al final:
<table>
<colgroup>
<col>
<col width="20px">
<col>
</colgroup>
<tr>
<td>data</td>
<td></td>
<td>more data</td>
</tr>
</table>
Estime los bordes de las celdas de la tabla con: nth-child para que la segunda y tercera columnas parezcan ser una sola columna.
table tr td:nth-child(2) { border: 1px solid black; border-right:0; }
table tr td:nth-child(3) { border: 1px solid black; border-left:0; }
Si no puede usar relleno (por ejemplo, tiene bordes en td) intente esto
table {
border-collapse: separate;
border-spacing: 2px;
}
Si tiene control del ancho de la tabla, inserte un relleno-izquierda en todas las celdas de la tabla e inserte un margen negativo-izquierda en toda la tabla.
table {
margin-left: -20px;
width: 720px;
}
table td {
padding-left: 20px;
}
Tenga en cuenta que el ancho de la tabla debe incluir el ancho de relleno / margen. Usando lo anterior como ejemplo, el ancho visual de la tabla será 700px.
Esta no es la mejor solución si usa bordes en las celdas de su tabla.
Siguiendo la solución de Cian de establecer un borde en lugar de un margen, descubrí que puedes establecer el color del borde en transparente para evitar tener que hacer coincidir el color con el fondo. Funciona en FF17, IE9, Chrome v23. Parece una solución decente siempre que no necesite un borde real.
Simplemente puede hacer eso:
<html>
<table>
<tr>
<td>one</td>
<td width="10px"></td>
<td>two</td>
</tr>
</table>
</html>
No se requiere CSS :) Este 10px es tu espacio.
Una palabra de advertencia: aunque el padding-right podría resolver su problema particular (visual), no es la forma correcta de agregar espaciado entre las celdas de la tabla. Lo que hace padding-right para una celda es similar a lo que hace para la mayoría de los otros elementos: agrega espacio dentro de la celda. Si las celdas no tienen un color de borde o de fondo u otra cosa que ofrezca el juego, esto puede imitar el efecto de establecer el espacio entre las celdas, pero no de otra manera.
Como alguien señaló, las especificaciones de margen se ignoran para las celdas de la tabla:
Especificación CSS 2.1 - Tablas - Diseño visual de los contenidos de la tabla
Los elementos de la tabla interna generan cuadros rectangulares con contenido y bordes. Las células también tienen relleno. Los elementos de la tabla interna no tienen márgenes.
¿Cuál es el camino "correcto" entonces? Si está buscando reemplazar el atributo de cellspacing de cellspacing de la tabla, el border-spacing entre border-collapse (con border-collapse desactivado) es un reemplazo. Sin embargo, si se requieren "márgenes" por celda, no estoy seguro de cómo se puede lograr correctamente con CSS. El único truco que puedo pensar es usar padding como el anterior, evitar cualquier estilo de las celdas (colores de fondo, bordes, etc.) y en su lugar usar contenedores DIV dentro de las celdas para implementar dicho estilo.
No soy un experto en CSS, por lo que podría estar equivocado en lo anterior (¡lo que sería genial saber! A mí también me gustaría una solución de CSS de margen de celda de tabla).
¡Aclamaciones!
Usar colapso de borde: separar; no funcionó para mí, porque solo necesito un margen entre las celdas de la tabla que no están a los lados de la mesa.
Se me ocurrió la siguiente solución:
- CSS
.tableDiv{
display: table;
}
.cellSeperator {
display: table-cell;
width: 20px;
}
.cell1 {
display: table-cell;
width: 200px;
}
.cell2 {
display: table-cell;
width: 50px;
}
- HTML
<div class="tableDiv">
<div class="cell1"></div>
<div class="cellSeperator"></div>
<div class="cell2"></div>
</div>
el margen no funciona desafortunadamente en celdas individuales, sin embargo, puede agregar columnas extra entre las dos celdas donde desea poner un espacio entre ... otra opción es usar un borde con el mismo color que el fondo ...
Aplique esto a su primera <td> :
padding-right:10px;
Ejemplo HTML:
<table>
<tr>
<td style="padding-right:10px">data</td>
<td>more data</td>
</tr>
</table>
<!DOCTYPE html>
<html>
<head>
<style>
table{
border-spacing: 16px 4px;
}
td {
border: 1px solid black;
}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>
Usar el relleno no es la forma correcta de hacerlo, puede cambiar el aspecto pero no es lo que quería. Esto puede resolver su problema.