name - appearance none css mozilla
Pantalla: Bloque que no funciona en Chrome o Safari (3)
Tengo una simple necesidad de mostrar las celdas de una fila de la tabla verticalmente. Esto funciona bien en FF, pero no en Chrome o Safari en el Ipad.
El siguiente ejemplo se representa como se esperaba en FF, con cada celda de fila debajo de la otra, pero en Chrome, parece ignorar la pantalla: bloque por completo.
¿Cuál es el problema o hay una mejor manera de hacerlo?
(La razón para querer esto es que estoy usando @media en el CSS para representar la tabla de manera diferente en una pantalla pequeña)
Para un ejemplo más visual:
Una mesa normal podría ser
DATA1 | DATA2 | DATA3
pero con display: block, debería ser
DATA1
DATA2
DATA3
Muchas gracias
<html>
<head>
<style>
table,
thead,
tr,
td
{
display:block;
}
table,tr
{
border : 1px dotted red;
}
td
{
border:1px dashed blue;
}
thead
{
display:none;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<td>Heading 1</td>
<td>Heading 2</td>
<td>Heading 3</td>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
</tbody>
</table>
</body>
</html>
Tabla rota en Chrome o Safari
Muchos casos ocurren en la mesa.
display:block;
display:"";
o
display:block;
display:table-row;
*display:block;
He hecho un truco con el uso de th en lugar de td. Y un hack css que solo se aplica en safari (no webkit general).
HTML:
<table>
<tr>
<th>Cell 1</th>
<th>Cell 2</th>
</tr>
</table>
CSS:
table {
width: 100%;
text-align: left;
}
/* Safari 7.1+ */
_::-webkit-full-page-media, _:future, :root .safari_only {
.safari-fix table tr {
display: block;
width: 100%;
}
}
/* Safari 10.1+ */
@media not all and (min-resolution:.001dpcm) {
@media {
.safari-fix table tr {
display: block;
width: 100%;
}
}
}
table th {
width: 100%;
display: block;
}
Aquí está mi jsfiddle
EDIT 2:
Creo que he resuelto tu problema. Webkit anula la display: block; y lo calcula para ser display: table-cell; en una td cuando no hay <!DOCTYPE> declarado para su html.
Para solucionar esto, te recomiendo que configures <!DOCTYPE html> antes de <html> en la parte superior de tu html.
La razón por la que jsfiddle funcionará es porque el sitio tiene un <!DOCTYPE> ya declarado.
Prueba esto y hazme saber si soluciona tu problema. Si no intentaré encontrar otra respuesta.