响应式 table 仅适用于 Firefox

Question

我使用了来自 http://www.jqueryscript.net/table/Creating-Responsive-Mobile-friendly-Tables-with-jQuery-Table-Mobilize.html 的 jQuery 来使已经存在的 table 响应。它在 Firefox 中工作得很好，但我一直无法弄清楚为什么它在 Chrome、Opera 或 IE 中不起作用。

起初我想到了媒体查询，但它们适用于所有浏览器。但是，除了 Firefox 之外，任何浏览器的响应速度都不够快。那么也许 jQuery？

这是我第一次弄乱响应式 table...所以不要害羞地指出任何显而易见的事情 :) 我可能没有看到它。

不幸的是，我没有创建原始 table，所以我放弃了已经存在的东西。我想知道 fancybox 是否以某种方式弄乱了它...我知道它还没有设置响应。

有什么建议吗？使用红色和蓝色背景色以便于查看媒体查询。

Table 在 http://www.infraredcamerasinc.com/efficient/pages/lenscalculator/index.html

CSS:

    table.tableMobilize tbody,table.tableMobilize td,table.tableMobilize th,table.tableMobilize tr{border:0;padding:0;white-space:normal;font-size:1em}

    table.tableMobilize td,table.tableMobilize th{padding:8px;/*line-height:1.42857143;*/vertical-align:top;/*border-top:1px solid #ddd;*/text-align:left}

    table.tableMobilize.tableMobilized{display:block}

    table.tableMobilize.tableMobilized tfooter,table.tableMobilize.tableMobilized thead{display:none;visibility:hidden}

    table.tableMobilize.tableMobilized td:hide{display:none!important}

    table.tableMobilize.tableMobilized tbody,table.tableMobilize.tableMobilized td,table.tableMobilize.tableMobilized th,table.tableMobilize.tableMobilized tr{display:block}

    table.tableMobilize.tableMobilized td[data-title]:before{content:attr(data-title) ": ";color:#555}

    table.tableMobilize.tableMobilized th[data-title]:first-child:before{content:''}

    table.tableMobilize.tableMobilized th:first-child{font-size:1.4em;border-top:none;vertical-align:bottom;margin-top:.5em;text-transform:uppercase;border-bottom:1px solid #ddd;font-weight:400;text-align:left;color:#111}

    table.tableMobilize.tableMobilized td:first-child{border-top:2px solid #aaa}

    table.tableMobilize.tableMobilized tr:first-child td:first-child{border-top:none!important}

    table.tableMobilized.table-striped>tbody>tr:nth-of-type(odd) td{background-color:green}



@media screen and (max-width:767px) {

    table.tableMobilize{display:block}

    table.tableMobilize tfooter,table.tableMobilize thead{display:none;visibility:hidden}

    table.tableMobilize td:hide{display:none!important}

    table.tableMobilize tbody,table.tableMobilize td,table.tableMobilize th,table.tableMobilize tr{display:block}

    table.tableMobilize td[data-title]:before{content:attr(data-title) ": ";color:#555}

    table.tableMobilize th[data-title]:first-child:before{content:''}

    table.tableMobilize th:first-child{font-size:1.4em;border-top:none;vertical-align:bottom;margin-top:.5em;text-transform:uppercase;border-bottom:1px solid #ddd;font-weight:400;text-align:left;color:#111}

    table.tableMobilize td:first-child{/*border-top:2px solid #aaa*/}

    table.tableMobilize tr:first-child td:first-child{/*border-top:none!important*/}

    table.tableMobilize.table-striped>tbody>tr:nth-of-type(odd) td{background-color:red}

    }



@media screen and (min-width:768px) {

    table.tableMobilize>thead th{vertical-align:bottom;border-bottom:2px solid #ddd;border-top:0;padding:8px;line-height:1.42857143}

    table.tableMobilize.table-striped>tbody>tr:nth-of-type(odd){background-color:blue}

    }

Answer 1

看起来不是您的 CSS，实际上是您的 HTML DOCTYPE 导致了问题。似乎 4.01 Transitional DOCTYPE 覆盖了 TD 元素上的 "display: block" 并将它们设置为 "table-cell".

此更改应该可以解决您的问题，我测试它时有效：

变化：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

收件人：

<!DOCTYPE HTML>

这是另一个有同样问题的帖子： Display:Block not working in Chrome or Safari

响应式 table 仅适用于 Firefox

Responsive table works ONLY in Firefox

css

media

jquery