CSS para hacer que aparezca el borde de una celda vacía?

¿Qué CSS debo usar para hacer que aparezca el borde de una celda incluso si la celda está vacía?

IE 7 específicamente.

Si recuerdo, la célula no existe en algunos IE a menos que esté llena de algo …

Si puede poner un   (espacio sin interrupción) para llenar el vacío, que generalmente funcionará. ¿O requiere una solución pura de CSS?

Aparentemente, IE8 muestra las celdas de forma predeterminada, y tiene que ocultarlo con empty-cells:hide Pero no funciona en absoluto en IE7 (que se oculta por defecto).

Otra forma de asegurarse de que haya datos en todas las celdas:

  $(document).ready(function() { $("td:empty").html(" "); }); 

Si establece la propiedad border-collapse para collapse , IE7 mostrará las celdas vacías. También colapsa las fronteras, por lo que podría no ser el 100% de lo que quieres

 td { border: 1px solid red; } table { border-collapse: collapse; }   Border-collapse Test  
 
test test
test test
test test
test

La pregunta sobre una solución de CSS, pero sobre la posibilidad de una solución HTML, aquí hay una:

Intente agregar estos dos atributos al elemento de la tabla: frame = “box” rules = “all” de esta manera:

 

Acabo de encontrar lo siguiente. Cumple con los estándares pero no funciona en IE. suspiro.

 empty-cells: show 

Me encontré con esta pregunta y no he visto ninguna respuesta que realmente abordara el problema.

El problema se debe a que IE7 no ve ningún contenido interno para la celda; en términos de progtwigción, la celda resulta null y, como la mayoría de las cosas, no puede bordear un null ni realizar ninguna acción en él. El navegador necesita un elemento / objeto que tenga un diseño, para aplicar un borde / diseño.

Incluso los

o vacíos no contienen contenido, por lo tanto, no hay nada que mostrar, lo que da como resultado ese caso null nuevo.

Sin embargo, puede engañar al navegador para que piense que la celda tiene contenido, dando las propiedades de diseño div/span vacías. La forma más fácil es aplicar el zoom:1 estilo CSS zoom:1 .

 
Foo

Esta solución alternativa es mejor que usar un   , ya que no estropea innecesariamente los lectores de pantalla, y no está tergiversando el valor de la celda. En el navegador más nuevo puede usar la empty-cell: alternativa.


Nota: en lugar del comentario de Tomalak, debe entenderse que hasLayout no tiene nada que ver con null , sino que fue meramente una comparación de cómo el navegador interactúa y hace que LayLayout sea similar a la forma en que una base de datos o lenguaje de progtwigción interactúa con nulos. Es un strech, pero pensé que podría ser más fácil de entender para los progtwigdores que se convirtieron en diseñadores web.

Idealmente, no debería tener ninguna celda vacía en una tabla. O bien tiene una tabla de datos, y no hay datos en esa celda específica (que debe indicar con “-“, o “n / a /”, o algo igualmente apropiado, o – si debe hacerlo – & nbsp; como se sugiere ), o tiene una celda que necesita abarcar una columna o fila, o está tratando de lograr un diseño con una tabla para la que debe usar CSS.

¿Podemos tener un poco más de detalle?

Esta pregunta es antigua, pero sigue siendo un resultado superior en Google, así que agregaré lo que he encontrado:

Simplemente agregando border-collapse: collapse al estilo de tabla me solucionó este problema en IE7 (y no afectó la forma en que se muestran en FF, Chrome, etc.).

Lo mejor es evitar el código extraño de agregar un   u otro elemento de espaciado cuando se puede arreglar con CSS.

Supongo que esto no se puede hacer con CSS; Necesitas poner un & nbsp; en cada celda vacía para que el borde se muestre en IE …

empty-cell solo arregló Firefox (SÍ realmente tuve este problema en Firefox) IE 7 y 8 aún eran problemáticos …

Esto funcionó para mí tanto en Firefox 3.6.x, IE 7 y 8, Chrome y Safari:

===========================

 table { *border-collapse: collapse;} .sampleTD { empty-cells: show;} 

===========================

Tuve que usar * para asegurarme de que el estilo de la tabla solo se aplicaba al navegador IE.

Pruebe esto si no puede usar un espacio no rompible:

 var tn = document.createTextNode('\ '); yourContainer.appendChild(ta); 

Creo un estilo div que tiene el mismo color de fuente que el fondo de su celda y escribo cualquier cosa (por lo general, un “-” “n / a” o “vacío”) para dar contenido a la celda. Se muestra si resaltas la página, pero cuando se ve normalmente se ve como quieres.

Uso una mezcla de html y css para crear cuadrículas de tablas cruzadas:

html

css

 td{background-color:#fff;} 

Hasta ahora no he visto ningún problema con ningún navegador.

“IE” no es un término útil en este contexto más ahora que IE8 está fuera.

IE7 siempre hace “empty-cells: show” (o eso me dicen … Vista). IE8 en cualquiera de sus modos “Quirks” o “IE7 Standards” siempre hace “empty-cells: hide”. IE8 en el modo “Estándares” se predetermina a “celdas vacías: mostrar” y admite el atributo a través de CSS.

Hasta donde yo sé, todos los demás navegadores han soportado esto correctamente durante varios años (sé que se agregó en Firefox 2).

Lo tomo de otro sitio web pero:

 .sampletable { border-collapse: collapse;} .sampleTD { empty-cells: show;} 

Use para el CSS para la tabla y el elemento TD respectivamente.