CODEWITHSUNDEEP
csssafariresponsive-designmedia-queriescss-tables
Sergej Popov
Sergej Popov

Reputation: 3021

Table-cell breaks on window resize in Safari

I have a table built out of div elements. By default elements display as table-cell. On @media screen and (max-width: 769px) elements need to become table-row.

Every browser works fine except Safari. In safari it shows fine until I re-size window to very narrow and then back full width. at that point table breaks. if I refresh page or disable and re-enable table-cell style table fixes itself.

Example: http://jsfiddle.net/sergejpopov/TvEWf/

Is that a Safari bug? How to fix?

Upvotes: 3

Views: 3721

Answers (1)

SW4
SW4

Reputation: 71220

It sounds like you're not adhering to a correct structure- you shouldn't swap out table-cell for table-row, they serve two distinctly different purposes which are not equivalent in terms of interpreted layout, the table structure should always follow:

table (display-table)
 row (display-row) <- important to denote a row of elements
  cell (display-cell) <- important to denote (column based) content within a row
  /cell
 /row
/table

You're missing out either the row or cell level with your approach, so although everythign seems to be interpreted correctly for the most part, your css is actually in error.

I would suggest you consider using floated or inline divs, see

FIDDLE

HTML

<div class="t">
    <div>1</div><div>2</div><div>3</div><div>4</div>
</div>

CSS

*{
    box-sizing:border-box;
}
.t
{
    width:100%;
}

.t>div
{
    border:1px solid red;
    display:inline-block;
    width:25%;
    margin:0;
    padding:0;
    zoom:1;
}


@media screen and (max-width: 769px) {
.t
{
    width:100%;
    display:table;
}

.t>div
{
    border:1px solid red;        
    display: block;
        width:100%;
    zoom:1;
}

}

Upvotes: 2

Related Questions