在JSFiddle上工作的完全相同的CSS，在浏览器中被破坏

我试图使用No More Tables方法做出响应表。在JSFiddle上工作的完全相同的CSS，在浏览器中被破坏

我刚刚复制并粘贴了上述示例中的代码。它工作正常JSFiddle：http://jsfiddle.net/wcp62x7t/

但在我的浏览器相同的代码无法正常工作。该表不表现得很好，当我降低了浏览器窗口的大小：

enter image description here

我在做什么错？以下是我在浏览器中尝试的完整HTML文件：我已经在OSX上的Safari和Chrome上尝试了它，并获得上述奇怪的行为。

<html> 
    <head> 
    <style> 
    @media only screen and (max-width: 800px) { 

    /* Force table to not be like tables anymore */ 
    #no-more-tables table, 
    #no-more-tables thead, 
    #no-more-tables tbody, 
    #no-more-tables th, 
    #no-more-tables td, 
    #no-more-tables tr { 
    display: block; 
    } 

    /* Hide table headers (but not display: none;, for accessibility) */ 
    #no-more-tables thead tr { 
    position: absolute; 
    top: -9999px; 
    left: -9999px; 
    } 

    #no-more-tables tr { border: 1px solid #ccc; } 

    #no-more-tables td { 
    /* Behave like a "row" */ 
    border: none; 
    border-bottom: 1px solid #eee; 
    position: relative; 
    padding-left: 50%; 
    white-space: normal; 
    text-align:left; 
    } 

    #no-more-tables td:before { 
    /* Now like a table header */ 
    position: absolute; 
    /* Top/left values mimic padding */ 
    top: 6px; 
    left: 6px; 
    width: 45%; 
    padding-right: 10px; 
    white-space: nowrap; 
    text-align:left; 
    font-weight: bold; 
    } 

    /* 
    Label the data 
    */ 
    #no-more-tables td:before { content: attr(data-title); } 
} 
    </style> 
    </head> 

    <body> 

<section id="no-more-tables"> 
<table> 
    <thead> 
    <tr> 
     <th>Code</th> 
     <th>Company</th> 
     <th class="numeric">Price</th> 
     <th class="numeric">Change</th> 
     <th class="numeric">Change %</th> 
     <th class="numeric">Open</th> 
     <th class="numeric">High</th> 
     <th class="numeric">Low</th> 
     <th class="numeric">Volume</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td data-title="Code">AAC</td> 
     <td data-title="Company">AUSTRALIAN AGRICULTURAL COMPANY LIMITED.</td> 
     <td data-title="Price" class="numeric">$1.38</td> 
     <td data-title="Change" class="numeric">-0.01</td> 
     <td data-title="Change %" class="numeric">-0.36%</td> 
     <td data-title="Open" class="numeric">$1.39</td> 
     <td data-title="High" class="numeric">$1.39</td> 
     <td data-title="Low" class="numeric">$1.38</td> 
     <td data-title="Volume" class="numeric">9,395</td> 
    </tr> 
    </tbody> 
</table> 
</section> 

</body> 
</html>

更新：在浏览器中的问题似乎是，在<td>元素仍然设置为display: table-cell即使我已经明确地称呼他们display: block：

enter image description here

来源

2015-02-06 Richard

您能否提供图片？ – arnolds 2015-02-06 15:48:01

谢谢，但一个什么样的形象？我已经包含了破碎样式的屏幕截图，以及Devtools中好奇行为的屏幕截图。应该可以使用我提供的HTML重现问题。 – Richard 2015-02-06 15:49:36

尝试过'display：block！important;'？ – Hareesh 2015-02-06 15:50:59

取出媒体查询标签@media only screen and (max-width: 800px) {}，它工作正常后。

更新：添加<!DOCTYPE html>修复了这个问题。

来源

2015-02-06 16:06:25 Hareesh

恐怕我的浏览器没有区别。 – Richard 2015-02-06 16:20:25

在我的电脑中测试过，从jsfiddle复制了相同的代码并且工作正常:(:(windows） – Hareesh 2015-02-06 16:25:06

是的，JSFiddle版本没问题，但是我粘贴到问题中的HTML文件对你有用吗？ – Richard 2015-02-06 16:27:21

在JSFiddle上工作的完全相同的CSS，在浏览器中被破坏

回答

相关问题