Question

我正在尝试将表格行显示为列表，因此它在手机上更易读。如果我使用此代码：

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

它在Firefox和Opera中应该可行，但在Chrome和IE中并不如预期的那样。 JSfiddle上的代码在所有浏览器中都应该呈现。 http://jsfiddle.net/4J3yw/

解决这个问题的任何技巧？

Answer 1

如评论中所述：

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

将表格行显示为列表

1 个答案:

Demo Fiddle