¿Es posible simular el espaciado entre las celdas de la tabla de manera que el espaciado vertical y el horizontal sean diferentes?
https://stackoverflow.com/questions/253121
-
05-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPregunta
En CSS, puede especificar el espaciado entre las celdas de la tabla usando la propiedad de espaciado de una tabla en el espaciado de los bordes.
Sin embargo, esto da como resultado un espacio uniforme entre columnas y filas, y estoy encontrando más situaciones en las que los diseños que estoy usando requieren espacios entre filas, pero no columnas, o viceversa.
Si tengo un fondo sólido, puedo simular el espaciado utilizando bordes del mismo color que el color de fondo.
También podría hacer que un div (por ejemplo) sea el primer elemento secundario de cada celda de la tabla, y use el relleno o los márgenes para obtener los resultados deseados, pero eso es mucho margen de beneficio adicional para adaptarse al estilo.
Dado que los datos que estoy mostrando son datos tabulares, ¿hay alguna forma sensata de lograr este estilo utilizando tablas?
Solución
Usted puede especificar diferentes espaciados para los bordes horizontales y verticales para espacio entre bordes o propiedades relacionadas. Simplemente especifique más de una medida. por ejemplo,
border-spacing: 1px 2px;
Otros consejos
En el caso general donde puede especificar los valores que pueden aplicarse global o individualmente en una propiedad (por ejemplo, " relleno "), siga un patrón simple .
-
Si especifica un solo valor (por ejemplo, relleno: 2px; ) se aplica el valor A la parte superior, inferior, izquierda y derecha. del objeto.
-
Si especifica dos valores (por ejemplo, relleno: 2px 7px; ) el primer valor Se aplica en la parte superior e inferior y el segundo a la izquierda y la derecha.
-
Si especifica tres valores, la primer valor se aplica a la parte superior, el segundo valor a la izquierda y derecha, y el valor final a la abajo.
-
Si especifica cuatro valores (por ejemplo, relleno: 1px, 2px, 3px, 4px; ) la Los valores se aplican arriba, derecha, abajo, a la izquierda en ese orden (recuerde el orden usando la palabra TRouBLe).
