我的 web page 上显示了表格，其宽度超过了屏幕的宽度。所以为了让它看起来像样，我已经习惯了 csstricks 中提到的技巧. CSS 也附在此处以供引用:
@media only screen and (max-width: 800px) {
* Force table to not be like tables anymore */
table, thead, tbody, th, td, tr {
display: block;
}
/* Hide table headers (but not display: none;, for accessibility) */
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
tr { border: 1px solid #ccc; }
td {
/* Behave like a "row" */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
}
td:before {
float: left;
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
}
/*
Label the data
*/
td:nth-of-type(1):before { content: "A/C Model"; }
td:nth-of-type(2):before { content: "Coil Model"; }
td:nth-of-type(3):before { content: "Furnace/FanCoil"; }
td:nth-of-type(4):before { content: "AHRI"; }
td:nth-of-type(5):before { content: "SEER"; }
td:nth-of-type(6):before { content: "EER"; }
td:nth-of-type(7):before { content: "AFUE"; }
td:nth-of-type(8):before { content: "HSPF"; }
td:nth-of-type(9):before { content: "Bryant Bonus"; }
td:nth-of-type(10):before { content: "Elec Rebate"; }
td:nth-of-type(11):before { content: "Furnace Rebate"; }
td:nth-of-type(12):before { content: "Federal Rebate"; }
td:nth-of-type(13):before { content: "Total Rebate"; }
}
效果在 chrome 上完全可见，如屏幕截图所示。 
但是，在 Safari(桌面和 iPhone)上，表格数据是困惑的。 
P.S:您可以在网站上运行以下示例查询来检查:
{ outdoor: 'ac',
indoor: 'Furnace coil',
coolingtons: '2',
furnace: 'New',
fuel: 'Gas',
venting: 'Condensing',
state: 'Massachussetts',
btuh: '60000',
electricutility: 'National Grid',
gasutility: 'Blackstone Gas' }
最佳答案
我检查了你的代码。请尝试更改 <!Doctype html5> to <!Doctype html>
引用: Chrome-specific CSS issue setting table cell to display:block
甚至没有在 webkit 浏览器中得到准确的输出。
引用此评论: https://bugs.webkit.org/show_bug.cgi?id=38527
分析后 --> webkit 浏览器不会覆盖显示属性。无论您将表格更改为什么，都返回到与 display:table-cell 相同的属性。
关于html - 媒体查询不支持 Safari，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37835304/