Question

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

我最初认为是媒体查询，但他们正在所有浏览器上工作。但是，除了Firefox之外，任何浏览器的响应性都会停止。也许是jQuery？

这是我第一次搞乱反应表...所以不要害怕指出任何明显明显的东西:)我可能没有看到它。

不幸的是，我没有创建原始表格，因此我将不再使用现有的表格。我想知道花哨盒是否在某种程度上弄乱它...我知道它还没有设置响应。

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

表格位于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

响应表仅适用于Firefox

1 个答案: