Display:Block not working in Chrome or Safari

后端未结

关注

 3  1002

I have a simple need to display the cells of a table row vertically. This works just fine in FF, but not in Chrome or Safari on the Ipad.

The example below renders a

相关标签:

3条回答

一向

2020-12-10 11:46
Table broken in Chrome or Safari

Many case occurs in tabless.
```
display:block;  
display:"";
```
or
```
display:block;
display:table-row; 
*display:block;
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

没有蜡笔的小新

2020-12-10 11:46

I've did a trick with using th's instead of td. And a css hack wich only applies on safari (not 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;
}

Here is my jsfiddle

0 讨论(0)

有刺的猬

2020-12-10 11:56

EDIT 2:

I think I have worked out your problem. Webkit overrides display: block; and computes it to be display: table-cell; in a td when there is no <!DOCTYPE> declared for your html.

To fix this I recommend you set <!DOCTYPE html> before <html> at the top of your html.

The reason the jsfiddle will work is because the site has a <!DOCTYPE> already declared.

Try this and let me know if it fixes your problem. If not I'll try find another answer.

0 讨论(0)
发布评论:

提交评论
- 加载中...