CODEWITHSUNDEEP
htmlcss
Lennart
Lennart

Reputation: 1028

Display table row as list

I'm trying to display a table-row as a list, so its better readable on mobile phones. If I use this code:

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

It works as should in Firefox and Opera, but not as expected in Chrome and IE. Code on JSfiddle renders as should, in all browsers. http://jsfiddle.net/4J3yw/

Any tricks to solve this?

Upvotes: 2

Views: 3113

Answers (1)

SW4
SW4

Reputation: 71240

As noted in the comments:

I'm trying to display a table-row as a list - the two are distinctly different, you shouldnt try to make one do the other as they serve very separate purposes, at the very least what you are attempting to do isnt semantically correct.

What you may look at doing is using a media query to change the nature of your layout, e.g.

(try resizing the viewable space)

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

Upvotes: 2

Related Questions