html - seguridad - ¿Cómo puedo hacer que "display: block" funcione en un<td> en IE?
seguridad de internet explorer (4)
¿Hay algo que pueda hacer para que IE muestre las celdas de la tabla como bloques reales?
Dado este estilo:
table,tbody,tr,td,div {
display: block;
border: 1px solid #0f0;
padding: 4px;
}
Y este html:
<table>
<tbody>
<tr>
<td>R1C1</td>
<td>R1C2</td>
<td>R1C3</td>
</tr>
</tbody>
</table>
<div>
<div>
<div>
<div>R1C1</div>
<div>R1C2</div>
<div>R1C3</div>
</div>
</div>
</div>
La tabla muestra exactamente lo mismo que los divs anidados tanto en Firefox como en Safari / Chrome. Pero en Internet Explorer (8) la propiedad display: block no tiene ningún efecto. La tabla se representa exactamente como si no estableciera esa propiedad.
Mi principal problema es que las células no se rompen; Todos rinden en una línea. (Los elementos tbody y tr no tienen fronteras ni relleno. Sin embargo, eso no es un problema para mí en este momento).
No he encontrado ninguna información sobre el problema al buscar. Los diagramas de compatibilidad de quirksmode y de otros lugares establecen que IE admite display: block desde v. 5.5. Cualquier discusión sobre los problemas de visualización de la tabla parece ser al hacer lo contrario, dando a los elementos que no pertenecen a la tabla alguna de las propiedades de la display: table-* .
Entonces, una vez más, ¿hay algo que pueda hacer para que IE represente las celdas de la tabla como bloque?
(La tabla real es realmente una tabla, con datos tabulares. Me gustaría mantenerlo de esa manera, y restyle discretamente).
Apliqué float: left para cosas . Funciona un poco
El mayor problema es el width: 100% combinado con el padding hace que las cosas sean demasiado anchas.
Asi que:
Demostración en vivo (sin el padding problemático)
Eso se ve un poco mejor, pero no estoy seguro de cómo puede agregar fácilmente padding todas partes si lo necesita.
Esto falla -> miserablemente <- en IE7 (simplemente no pasará por alto el hecho de que es una <table> ), e incluso si no le importa IE7, necesitará ajustes para su caso de uso (si es utilizable en absoluto).
IE7:
Lo descubrí con un colega mío.
¡AUNQUE RECOMENDAMOS FUERTEMENTE NO RESPALDAR IE8 EN TODO MÁS! Ya que está facilitando el uso de un producto no compatible y actualmente inseguro que no está a la altura de los estándares y técnicas actuales. Sería mucho mejor decirles a los usuarios que deben actualizar y darles algunos enlaces de descarga para elegir.
Habiendo dicho eso. El CSS a continuación es el CSS mínimo que necesita para solucionarlo en Internet Explorer 8.
table {
width: 100%;
}
td {
float: left;
width: 100%;
}
<table>
<tbody>
<tr>
<td>cell-1</td>
<td>cell-2</td>
</tr>
</tbody>
</table>
Lo siguiente funcionó para mí para IE6 +:
tr { display: block; position: relative } td.col1 { display: block; left: 0; top: 0; height: 90px; } td.col2 { display: block; position: absolute; left: 0; top: 30px; } td.col3 { display: block; position: absolute; left: 0; top: 60px; }
Suposiciones
- altura de la celda 30px
Inconvenientes:
- Altura de celda fija
- Especificación engorrosa de la propiedad
top(tal vez generar) - Solo funciona cuando HTML proporciona clases para columnas
Ventaja:
- Funciona en todos los navegadores.
Cuándo usar:
- Cuando no tiene control sobre HTML, pero tiene control sobre CSS. Me vienen a la mente algunas soluciones de pago alojadas que se muestran en un IFRAME y ofrecen una hoja de estilo personalizada.
agregue este código:
<!DOCTYPE html>
Display 是 的 的 的, display 上面 display 语句 语句 语句 语句, pantalla: bloque 对 td 就会 有效.
necesitas agregar este código en la parte superior.
<!DOCTYPE html>
<html>
<head>
<style>
td {
display: block;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<td>First Name</td>
<td>Last Name</td>
<td>Job Title</td>
</tr>
</thead>
<tbody>
<tr>
<td><div>James</div></td>
<td><div>Matman</div></td>
<td><div>Chief Sandwich Eater</div></td>
</tr>
<tr>
<td><div>The</div></td>
<td><div>Tick</div></td>
<td><div>Crimefighter Sorta</div></td>
</tr>
</tbody>
</table>
</body>
</html>
Agregue esta línea de código en la parte superior, pero use ''float'' y ''width'' es muy bueno. lo siento, mi inglés es tan pobre.