html5 - 将表格行显示为列表

我试图将表行显示为列表，这样在移动电话上可读性更好。如果我使用此代码：

    td {
        display: list-item;
        list-style-type: none;
        width: 50px;
        border: 1px solid silver;
    }

它在Firefox和Opera中的工作原理是一样的，但在Chrome和IE中的工作原理却不同。JSfiddle上的代码在所有浏览器中都会按原样呈现。http://jsfiddle.net/4J3yw/
有什么解决办法吗？

最佳答案

如评论所述：
I'm trying to display a table-row as a list-这两者明显不同，你不应该试图让其中一个做另一个，因为它们服务于非常不同的目的，至少你试图做的不是语义上正确的。
您可能会考虑使用媒体查询来更改布局的性质，例如。
（尝试调整可视空间的大小）
Demo Fiddle
HTML格式

<div class='table'>
    <div class='cell'>cell 1</div>
    <div class='cell'>cell 2</div>
    <div class='cell'>cell 3</div>
</div>

CSS

html, body {
    margin:0;
    padding:0;
    width:100%;
    background:white;
}
.table {
    display:table;
    width:100%;
}
.cell {
    display:table-cell;
    border:1px solid grey;
}
@media (max-width: 767px) {
    .table, .cell {
        display:block;
    }
}

关于html5 - 将表格行显示为列表，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/24527868/