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?CSS para hacer que aparezca el borde de una celda vacía?

IE 7 específicamente.

Fuente

2008-09-11 Allain Lalonde

¡Tengo este problema en IE6! hasta el momento :( –

problema sigue siendo actual en IE8 e IE9 – Betlista

Si no recuerdo mal, la célula dosn't existen en algunos de IE a menos que se llena de algo ...

Si usted puede poner un (espacio de no separación)   para llenar el vacío, que por lo general trabajan . ¿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 de manera predeterminada).

Fuente

2008-09-11 16:09:23 Grant

CSS puro sería bueno. Ya tengo nbsps allí, pero se siente sucio :) –

hasta donde yo sé, esa es la única solución, es lo que hacemos. –

+12

No haría eso. Añada un en su lugar. Poner causará un problema con Firefox cuando se acerca. – wbkang

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

Fuente

2008-09-11 16:10:41 fijter

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

empty-cells: show

Fuente

2008-09-11 16:16:51

Sin embargo, funciona en IE8, así que solo dale una década, y ya estás listo. – Grant

Curiosamente, también funciona para un html estándar

en IE6 pero no en una tabla ASP.NET :) –

Lo ideal es que no tenga celdas vacías en una tabla. O 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 sugerido), 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?

Fuente

2008-09-11 16:18:15

Me gusta esto. La claridad aumenta –

Si tiene una tabla muy grande (decenas de miles de celdas o más) con muchas celdas sin contenido (75-95%), puede ser más eficaz tener celdas vacías. – Michael

Si configura la propiedad border-collapse en collapse, IE7 mostrará las celdas vacías. También se derrumba las fronteras, aunque por lo que este no sea 100% lo que quiere

td { 
 
    border: 1px solid red; 
 
} 
 
table { 
 
    border-collapse: collapse; 
 
} 
 
<html> <head> <title>Border-collapse Test</title> <style type="text/css"> td { 
 
    border: 1px solid red; 
 
} 
 
table { 
 
    border-collapse: collapse; 
 
}

<table> 
 
    <tr> 
 
    <td></td> 
 
    <td>test</td> 
 
    <td>test</td> 
 
    </tr> 
 
    <tr> 
 
    <td>test</td> 
 
    <td></td> 
 
    <td>test</td> 
 
    </tr> 
 
    <tr> 
 
    <td>test</td> 
 
    <td></td> 
 
    <td>test</td> 
 
    </tr> 
 
    <tr> 
 
    <td>test</td> 
 
    <td></td> 
 
    <td /> 
 
    </tr> 
 
</table>

Fuente

2008-09-11 16:44:26 rpetrich

No estoy seguro de que esta sea la respuesta aceptada ya que, como señala el afiche, tiene otros efectos secundarios, que pueden ser indeseables. Tampoco es cierto, al menos en la medida en que puedo verificar. ¿Puedes publicar un enlace a un ejemplo de trabajo? –

He agregado un documento HTML de ejemplo que muestra el borde que muestra incluso en celdas en blanco. Probado en IE7, fx3 y el último safari. El efecto secundario principal del colapso de borde es que no puede tener bordes dobles que parecen decentes. Además, las celdas que faltan no se pueden diseñar, no importa cuánto lo intentes – rpetrich

También funciona en IE 6. –

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

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" tiene como valor predeterminado "celdas vacías: mostrar" y admite el atributo mediante CSS.

Por lo que yo sé, todos los demás navegadores han soportado esto correctamente durante varios años (sé que fue agregado en Firefox 2).

Fuente

2009-02-10 15:15:28

Otra forma de asegurarse de que haya datos en todas las células:

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

Fuente

2009-07-29 11:35:38 Rasmus

Esto funciona bien ya que puedes tenerlo en un archivo "ie.js" separado para incluirlo a través de comentarios condicionales. En mi caso, no quería cambiar mi backend por un error de IE. –

Gracias, me salvaste un par de cientos de declaraciones condicionales allí :) –

' ' no ' ;' –

estoy tomando esto desde otro sitio web, sino:

.sampletable { 
border-collapse: collapse;} 

.sampleTD { 
empty-cells: show;}

Uso de la CSS para el elemento de la tabla y TD respectivamente.

Fuente

2010-03-30 16:24:20 Sofox

celdas vacías sólo se fija Firefox (Sí, lo realmente tenía este problema en Firefox) IE 7 8 & estaban siendo problemática ..

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

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

table { 
*border-collapse: collapse;} 

.sampleTD { 
empty-cells: show;}

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

tenía que usar el * para asegurarse de que el estilo de tabla sólo era aplicado al navegador IE.

Fuente

2010-08-31 20:46:19

Usar css hacks puede tener consecuencias inesperadas, así que ten cuidado. Otra forma es usar CSS condicional. – span

La pregunta hecha por una solución CSS, pero en la remota posibilidad de una solución HTML va a hacer, aquí es uno:

Trate de añadir estos dos atributos al elemento de tabla: frame = reglas de "caja" = "todos" así:

<table border="1" cellspacing="0" frame="box" rules="all">

Fuente

2011-03-02 20:23:22 renozu

¡perfecto! funciona como encanto! – Nerrve

esta es la respuesta correcta – Stephan

hmm. no funciona si las celdas vacías están vacías porque no existen ... (por ejemplo, especificar un tr con 10 celdas td pero otras trs tienen celdas 100 o 1000 td) – Michael

de edad, pero sigue siendo un buen resultado de esta pregunta en Google, por lo que voy a añadir lo que he encontrado:

Simplemente añadiendo border-collapse: collapse a la mesa El estilo me arregló este problema en IE7 (y no afectó la forma en que se muestran en FF, Chrome, etc.).

Es mejor evitar el código extraño de agregar   u otro elemento de espaciado cuando se puede corregir con CSS.

Fuente

2011-04-06 23:45:48 Voodoo

Supe a través de 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 programación, la celda resulta como null y, como la mayoría de las cosas, no puede bordear 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 vacío <div></div> o no contiene contenido, por lo tanto no hay nada que mostrar, lo que resulta en que null caso de nuevo.

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

<table> 
    <tr><td>Foo</td> 
     <td><span style="zoom:1;"></span></td></tr> 
</table>

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

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

Fuente

2011-05-27 19:52:26 vol7ron

+1 Interesante. Aunque no estoy completamente convencido por su analogía 'nula'. –

@Tomalak: Fue la comparación más cercana que pude hacer con Layout. Si no hay elementos/objetos con disposición, entonces el navegador (IE) los trata de manera diferente y no les aplica una gran cantidad de ajustes visuales ni a ellos ni a sus padres cuando los procesa.Aunque no es sinónimo, utilicé la comparación de forma poco estricta porque Stack Overflow era conceptualmente un foro para programar preguntas y respuestas, no necesariamente para la depuración del diseño web; desde que creció :) tienes todo el derecho de no convencerte. – vol7ron

probé th {border-bottom: 1px solid red; zoom: 1;} en IE7 y no ayuda. el borde inferior no aparece ... – nerdess

Prueba esto si no se puede utilizar el espacio irrompible:

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

Fuente

2011-07-20 14:57:33 ruruskyi

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

Fuente

2012-03-07 14:10:54

¿Cómo mejora esto/se agrega a las otras 13 respuestas? –

utilizo una mezcla de HTML y CSS para crear cuadrículas de tablas cruzadas navegador:

html

<table cellspacing="1" style="background-color:#000;" border="0">

css

td{background-color:#fff;}

No he visto ningún problema con cualquier navegadores hasta el momento.

Fuente

2013-04-09 04:20:00

Cuestiones relacionadas

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

Respuesta

Cuestiones relacionadas