Html 将表行显示为列表

我试图将一个表行显示为一个列表，这样在手机上可读性更好。如果我使用此代码：

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

它在Firefox和Opera中工作正常，但在Chrome和IE中工作不正常。JSFIDLE上的代码在所有浏览器中都呈现出应有的效果

---

有什么技巧可以解决这个问题吗？

如评论中所述：

---

我试图将一个表行显示为一个列表

-这两个表行截然不同，您不应该试图让一个表行执行另一个表行，因为它们的用途非常不同，至少您尝试执行的操作在语义上是不正确的

您可以考虑使用媒体查询来更改布局的性质，例如

（尝试调整可视空间的大小）

HTML

---

我试图将一个表行显示为列表

-这两个表行截然不同，你不应该试图让一个表行显示另一个表行，因为它们的用途非常不同。Chrome和IE中的意外行为是什么？意外行为是td不显示为列表项。这实际上是我正在尝试的；我希望我不需要更改HTML，因为这将花费更多的开发和测试工作。至于语义学，列表或表格是否更合适，这是一个决定性的决定。但是，div没有语义值；-）@Lennart-是和否，相对于暗示列表是一个表或一个表是一个列表，这是相对中立的，但不确定这是否是一个紧迫的问题：）这确实不是一个紧迫的问题：-）主要的问题是它需要更多的测试，因为网站也必须在IE8中工作。这张桌子经过反复试验。

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

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;
    }
}