在 Chrome 中调整浏览器大小后表头折叠

Question

我在 Chrome 中折叠表头时遇到问题。当我将窗口缩小到移动/窄屏幕的窄宽度（768 像素）然后返回更大的尺寸时，表格标题不会返回到表格的 100% 宽度并且第 th 个元素在左侧重叠。但是，表格数据单元格会正确调整大小。

此问题仅发生在桌面版 Chrome（版本 45.0.2454.85）中。我也在 Mac 和 Windows 中复制了它。这在 Safari 中不会发生，所以我已经排除了 webkit 是一个潜在问题。

要在 Chrome 中重现该问题，请将窗口大小调整为小于 768 像素（或直到移动样式启动），然后将窗口恢复为正常大小。您可以在此处看到问题的示例页面：http://mineralsrefining.com.php53-15.ord1-1.websitetestlink.com/development-of-hhs-technology/

这是我的代码：

HTML

<table class="results">
<col span="1" class="wide">
<thead>
<tr class="headerRow">
<th>Location and
Type of Coal</th>
<th>Feed
Ash %</th>
...
</tr>
</thead>
<tbody>
<tr>
<td>Eastern Kentucky
Mine A – PCI/Thermal</td>
...

CSS

body.page table {
border:none;
margin:40px auto;
width:100%;
font-family:'Lato', sans-serif;
table-layout:fixed;
}

body.page thead {
background:#ececec;
font-weight:700;
color:#a2222b;  
}

body.page th {
padding:15px 0;
text-align:left;
width:auto;
}

body.page th:first-child {
padding-left:30px;
}

body.page tr {
border-bottom:2px solid #ebebeb;
}

body.page td {
padding:10px;
}

body.page td:first-child {
padding-left:30px;
}

提前感谢您的帮助！

Answer 1

当表格具有表格标题<thead> 时，这似乎是一个带有表格大小调整的 chrome 错误。如果在调整大小后在开发工具中将表格设置为display:none，然后删除display:none，表格将再次呈现并正确查看。

我想作为一种解决方法，尝试使用两个表来查看与特定媒体查询相关的特定表：

（表 1）媒体 @media screen and (max-width: 940px) 的视图和另一个表（表 2）用于低于此宽度的屏幕。

或者消除<thead> 并简单地使用<tr> 和<td> 并通过id 或类将您的第一行标识为标题。