gra*_*ets 18 css safari firefox google-chrome
我只需要垂直显示表格行的单元格.这适用于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>
fro*_*guy 61
编辑2:
我想我已经解决了你的问题.当没有为你的html声明时,Webkit会覆盖display: block;并计算它display: table-cell;在td中<!DOCTYPE>.
为了解决这个问题,我建议你设置<!DOCTYPE html>之前,<html>在你的HTML的顶部.
jsfiddle工作的原因是因为该网站<!DOCTYPE>已经声明了.
试试这个,让我知道它是否解决了你的问题.如果没有,我会尝试找到另一个答案.
| 归档时间： |
|
| 查看次数： |
23432 次 |
| 最近记录： |