Safari不接受媒体查询:显示:要显示的表格单元格:块

我的问题完全在于Safari版本9.1.2(11601.7.7)的问题 其他浏览器和设备我没有遇到问题。

出于响应目的,我喜欢将所有表格元素从水平布局转换为垂直布局,并使用“数据标签”属性在视口收缩时表格重建时保留表格行与表行之间的标题标签。

对于所有表格,我将设置一个全局css规则:表格布局:固定;

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

在大多数情况下,这适用于我见过的每一款浏览器,但现在我遇到了一个严重的问题,Safari没有意识到这一点。即使我进入Safari的开发者工具,手动强制将td从表格单元格显示到块,也没有变化,而且当我从样式(规则)切换到计算的样式时,它仍然读取display:table cell。

一、 就我个人而言,我无法理解为什么Safari不允许显示更改,即使是手动更改。