Вопрос по css, safari, firefox, google-chrome – Дисплей: блок не работает в Chrome или Safari

16

Мне просто нужно отобразить ячейки строки таблицы по вертикали. Это отлично работает в 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>
Почему вы делаете таблицы более сложными, чем они? Если вы хотите отобразить таблицу с одним столбцом, просто создайте таблицу с одним столбцом; нет необходимости определять их с помощьюdisplay: block;. Sparky

Ваш Ответ

3   ответа
0

Многое происходит в таблице.

display:block;  
display:"";

ил

display:block;
display:table-row; 
*display:block;
58

EDIT 2:

Думаю, я решил твою проблему. Webkit переопределяетdisplay: block; и вычисляет его какdisplay: table-cell; в тд, когда нет<!DOCTYPE> объявлено для вашего html.

Чтобы исправить это, я рекомендую установить<!DOCTYPE html> до<html> в верхней части вашего HTML.

Причина, по которой jsfiddle будет работать, заключается в том, что на сайте есть<!DOCTYPE> уже объявлено.

Попробуйте это и дайте мне знать, если это решит вашу проблему. Если нет, я постараюсь найти другой ответ.

Я добавил скриншот своих результатов в FF и Chrome. В какой версии Chrome вы тестируете? frontendzzzguy
нет, не то, что я имею в виду. Я добавил текстовый пример того, что я имею в виду к основному тексту. Дайте мне знать об этом до сих пор не ясно. Благодарност graemegets
Версия Chrome: 18.0.1025.168 м graemegets
Интересно, что ваш код jsFiddle (без 'float') прекрасно работает в Chrome !! не только при запуске внутри jsFiddle. graemegets
Да, это то, что я ожидаю - но я не работаю с Mac - я в Windows. Интересно, что мой разработчик, который написал код (и сейчас находится в отпуске), похоже, считает, что он работает, и он работает на Mac - так что есть разница между Chrome на Mac и ПК - хотя он также не работает на Safari на Ipad graemegets
0

который применяется только на сафари (не webkit вообще).

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;
}

Вот мой Jsfiddle

Похожие вопросы