Question

I'm having trouble with collapsing table heads in Chrome. When I shrink the window to a narrow width (768px) for mobile/narrow screens and then return it a larger size, the table header does not return to 100% width of the table and the th elements overlap on the left. However, the table data cells resize correctly.

This problem only happens in Chrome (version 45.0.2454.85) for desktop. I've reproduced it in Mac and Windows as well. This doesn't happen in Safari, so I've ruled out webkit being a potential issue.

To reproduce the problem in Chrome, resize your window to less than 768px (or until mobile styles kick in) then return the window to normal size. Example page here where you can see the problem: http://mineralsrefining.com.php53-15.ord1-1.websitetestlink.com/development-of-hhs-technology/

Here's my code:

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;
}

Thanks in advance for help!

Answer 1

当表格具有表头<thead>时，这似乎是一个表格重新调整大小的chrome bug。如果您在调整大小后设置开发工具将表格设置为display:none，然后移除display:none，则表格会再次渲染并正确查看。

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

（表1）对此宽度以下的屏幕的媒体@media screen and (max-width: 940px)和另一个表（表2）的观点。

或删除<thead>，只需将<tr>与<td>一起使用，并通过ID或类将第一行标识为标题。

Table Header Collapsing After Browser Resize in Chrome

1 个答案: