Wyświetl: blok nie działa w Chrome lub Safari
Mam prostą potrzebę wyświetlania komórek wiersza tabeli w pionie. Działa to dobrze w FF, ale nie w Chrome ani Safari na iPadzie.
Poniższy przykład renderuje zgodnie z oczekiwaniami w FF, z każdą komórką wiersza pod sobą, ale w Chrome wydaje się całkowicie ignorować blok wyświetlania:.
Jaki jest problem - czy jest lepszy sposób, aby to zrobić.
(Powodem tego jest to, że używam @media w CSS, aby renderować tabelę inaczej dla małego ekranu)
dla bardziej wizualnego przykładu:
Może być normalny stół
DATA1 | DATA2 | DATA3
ale z display: block, powinno być
DATA1
DATA2
DATA3
Wielkie dzięki
<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>