Question

我只需要垂直显示表格行的单元格。这在FF中运行得很好，但在Ipad中不适用于Chrome或Safari。

下面的示例在FF中按预期呈现，每个行单元格在彼此之下，但在Chrome中，它似乎忽略了display：block。

问题是什么 - 或者有更好的方法吗？

（想要这个的原因是我在CSS中使用@media来为小屏幕呈现不同的表格）

有一个更直观的例子：

普通表可能是

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>

Answer 1

编辑2：

我想我已经解决了你的问题。当没有为您的html声明display: block;时，Webkit会覆盖display: table-cell;并在td中将其计算为<!DOCTYPE>。

要解决此问题，我建议您在html顶部的<!DOCTYPE html>之前设置<html>。

jsfiddle工作的原因是因为该网站已经声明了<!DOCTYPE>。

尝试此操作并告诉我它是否可以解决您的问题。如果没有，我会尝试找到另一个答案。

Answer 2

Chrome或Safari中的表格

很多情况都发生在tabless中。

display:block;  
display:"";

或

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

Answer 3

我使用th而不是td做了一个技巧。并且css hack仅适用于safari（不是webkit general）。

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

显示：阻止无法在Chrome或Safari中使用

3 个答案: