Дисплей: блок не работает в Chrome или Safari
Мне просто нужно отобразить ячейки строки таблицы по вертикали. Это отлично работает в FF, но не в Chrome или Safari на Ipad.
Пример ниже показывает, как и ожидалось в FF, с каждой ячейкой строки друг под другом, но в Chrome, похоже, вообще игнорируется display: block.
В чем проблема - или есть лучший способ сделать это.
(Причина этого заключается в том, что я использую @media в CSS, чтобы по-разному отображать таблицу на маленьком экране)
для более наглядного примера:
Нормальная таблица может быть
<code>DATA1 | DATA2 | DATA3 </code>
но с display: block, оно должно быть
<code>DATA1 DATA2 DATA3 </code>
Огромное спасиб
<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>