CODEWITHSUNDEEP
htmlcsshtml-tablemedia-queriesresponsive
Murphy1976
Murphy1976

Reputation: 1475

Safari not honoring Media Queries: display: table-cell to display: block

My problem solely rests on the shoulders of Safari Version 9.1.2 (11601.7.7) Other Browsers and devices I haven't had an issue with.

For responsive purposes, I like to convert all Table elements from a horizontal layout to a vertical layout, and use the data-label attribute to retain the header labels from table-row to table-row as the table rebuilds itself when the viewport shrinks.

For all tables, I will set a global css rule: table-layout: fixed;

HTML:

<table width="100%" class="table">
     <thead>
          <tr>
               <th>Name</th>
               <th>Date</th>
               <th>Place</th>
          </tr>
     </thead>
     <tbody>
          <tr>
               <td data-label="Name">John Doe</td>
               <td data-label="Date">12/31/2018</td>
               <td data-label="Place">Milwaukee, WI</td>
          </tr>
          <tr>
               <td data-label="Name">Jane Smith</td>
               <td data-label="Date">10/17/2018</td>
               <td data-label="Place">Chicago, IL</td>
          </tr>
          <tr>
               <td data-label="Name">Bob Jones</td>
               <td data-label="Date">11/03/2018</td>
               <td data-label="Place">Cleveland, OH</td>
          </tr>
     </tbody>
</table>

CSS:

.table, table {
     table-layout: fixed;
}

@media screen and (max-width:991px){
     .table thead {
          display: none;
     }

     .table td {
          display: block;
          width: 100%;
          padding: 5px 5px 5px 120px;
          position: relative;
     }

     .table td:before {
          content: attr(data-label);
          position: absolute;
          top: 0;
          left: 0;
          padding: 5px;
          text-align: right;
     }
}

For the most part, This works for every browser I've seen, but now I'm having a severe issue with Safari not recognizing this. Even when I go into the Developer Tools of Safari and manually force the display of a td from table-cell to block, there is no change, PLUS when I switch from Styles - Rules to Styles Computed, it STILL reads display:table-cell.

I, for the life of me, cannot figure out WHY Safari is not allowing the display change, even when I do it manually.

Upvotes: 1

Views: 502

Answers (1)

leepowers
leepowers

Reputation: 38318

Had same issue. Make sure first line of your HTML file has this doctype declaration:

<!DOCTYPE html>

Which sets the document type to HTML5 text/html mode. My guess is Safari uses a different doctype by default; or tries to guess the doctype, and is getting in wrong in certain cases.

See the following for a deep dive into doctypes if you're interested:

https://hsivonen.fi/doctype/

Upvotes: 1

Related Questions