Вопросы Теги

Display:Block not работая в Chrome или Safari

У меня есть простая потребность отобразить ячейки строки таблицы по вертикали. Это прекрасно работает в FF, но не в Chrome или Safari на Ipad.

Приведенный ниже пример отображается в FF, как и ожидалось, с каждой ячейкой строки друг под другом, но в Chrome кажется, что display:block полностью игнорируется.

В чем проблема или есть ли лучший способ сделать это?

(Причина этого в том, что я использую @media в CSS, чтобы отображать таблицу по-разному для маленького экрана)

для более наглядного примера:

Обычная таблица может быть 

DATA1 | DATA2 | DATA3

, но с display:block, должно быть

DATA1
DATA2
DATA3

Большое спасибо

<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>
18
задан graemegets 11 May 2012 в 18:44
поделиться