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ół
<code>DATA1 | DATA2 | DATA3 </code>
ale z display: block, powinno być
<code>DATA1 DATA2 DATA3 </code>
Wielkie dzięki
<code><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> </code>