响应式表仅适用于 Firefox答案

【问题标题】：Responsive table works ONLY in Firefox响应式表仅适用于 Firefox
【发布时间】：2015-11-28 15:52:03
【问题描述】：

我使用来自：http://www.jqueryscript.net/table/Creating-Responsive-Mobile-friendly-Tables-with-jQuery-Table-Mobilize.html 的 jQuery 来使已经存在的表响应。它在 Firefox 中运行得非常好，但对于我来说，我无法弄清楚为什么它在 Chrome、Opera 或 IE 中不起作用。

一开始我认为是媒体查询，但它们适用于所有浏览器。但是，除了 Firefox 之外的任何浏览器都无法响应。那么也许是jQuery？

这是我第一次弄乱响应式表格...所以不要害羞地指出任何明显的东西 :) 我可能没有看到它。

很遗憾，我没有创建原始表格，所以我放弃了已有的表格。我想知道fancybox是否以某种方式弄乱了它……我知道它还没有设置响应式。

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

桌子在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}

    }

【问题讨论】：

标签： jquery css media

【解决方案1】：

看起来不是您的 CSS，实际上是您的 HTML DOCTYPE 导致了问题。似乎 4.01 过渡 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

【讨论】：

你是天赐之物！！！非常感谢，完美运行！甚至没有考虑改变 DOCTYPE。
嘿没问题！这很奇怪，很高兴我能帮上忙！