在JSFiddle上使用相同的CSS，在浏览器中打破 [英] Identical CSS working on JSFiddle, broken in browser
问题描述
我正在尝试使用没有更多表<来制作响应表/ a>接近。
I'm trying to make responsive tables using the No More Tables approach.
我只是复制并粘贴了上面例子中的代码。它适用于JSFiddle： http://jsfiddle.net/wcp62x7t/
I've simply copied and pasted the code from the example above. It works fine on JSFiddle: http://jsfiddle.net/wcp62x7t/
但我的浏览器中相同的代码不能正常工作。当我减小浏览器窗口的大小时，表格表现不佳：
But identical code in my browser does not work fine. The tables do not behave nicely when I reduce the size of the browser window:
我做错了什么？这是我在浏览器中尝试的完整HTML文件：我在OSX上的Safari和Chrome中都尝试过它并获得上面的奇怪行为。
What am I doing wrong? Here's the complete HTML file that I'm trying in my browser: I've tried it in both Safari and Chrome on OSX and get the odd behaviour above.
<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
UPDATE: The problem in the browser seems to be that the <td> elements are still set to display: table-cell even though I've explicitly styled them with display: block:
推荐答案
删除媒体查询标记 @media only屏幕和（max-width：800px） {} ，之后工作正常。
Remove the media query tag @media only screen and (max-width: 800px) {}, it works fine after.
更新：添加<！DOCTYPE html> 解决了问题。
UPDATE: Adding <!DOCTYPE html> fixed the problem.
这篇关于在JSFiddle上使用相同的CSS，在浏览器中打破的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
