21

我有一个简单的需要垂直显示表格行的单元格。这在 FF 中工作得很好，但在 Ipad 上的 Chrome 或 Safari 中却不行。

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

有什么问题 - 或者有更好的方法来做到这一点。

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

一个更直观的例子：

一张普通的桌子可能是

DATA1 | DATA2 | DATA3

但使用显示：块，它应该是

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>
4

3 回答 3

66

编辑2：

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

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

jsfiddle 可以工作的原因是该站点<!DOCTYPE>已经声明了一个。

试试这个，让我知道它是否能解决您的问题。如果没有，我会尝试找到另一个答案。

于 2012-05-11T18:13:46.843 回答
1

我用 th's 而不是 td 做了一个技巧。一个 css hack 只适用于 safari（不是一般的 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

于 2018-01-11T11:32:11.270 回答
0

Chrome 或 Safari 中的表格损坏

许多情况发生在表中。

display:block;  
display:"";

或者

display:block;
display:table-row; 
*display:block;
于 2013-03-04T10:28:17.453 回答