刷新页面时，缓存会破坏HTML表格

Question

我一直在与这个问题作斗争一段时间，但却无法找出原因。我基本上有一个表格显示Woocommerce变体，每个变体都在它自己的行中。我遇到的问题是刷新页面时，<th>行崩溃并且不与tbody对齐。

有趣的是，如果我在页面加载后在控制台中更改<th>的某些css，它会自行修复并排队。同样适用如果我在网络选项卡中打开“禁用缓存”后打开控制台并刷新页面。

我的猜测是在添加Woocommerce数据之前加载html并且没有足够的时间来获得正确的宽度。然而，这是最近刚刚开始发生的问题。

有谁知道是什么原因引起的？

<table class="variations variations-grid" cellspacing="0">
   <thead>
      <tr>
         <th><img class="camera-icon" src="/wp-content/uploads/2016/10/picture-holder.png"></th>
         <th>
            Type
         </th>
         <th>Length</th>
         <th class="length">Weight</th>
         <th>Height</th>
         <th>Depth</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>
            <div class="thumbnail">
               <img width="44" height="54" alt="Photinia Red Robin " src="/wp-content/uploads/2016/09/Photinia-Red-Robin-267x325.jpg">
            </div>
         </td>
         <td class="attr attr-attribute_size">
            <p>Hedge Bag</p>
         </td>
         <td class="attr attr-attribute_length">
            <p>100cm</p>
         </td>
         <td class="attr attr-attribute_weight">
            <p>75Kg</p>
         </td>
         <td class="attr attr-attribute_height">
            <p>140-150cm+</p>
         </td>
         <td class="attr attr-attribute_depth">
            <p>40cm</p>
         </td>
         <td class="price">
            <span class="price"><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">£</span>191.00</span></span>                    
            per metre                
         </td>
         <td class="product-actions">
            <a class="button" href="#modal0">More info</a>
         </td>
      </tr>
   </tbody>
</table>

这就像它看起来像破碎：qazxsw poi

如果我禁用缓存或者在加载后更改css，这就是看起来的样子。这是它应该看起来的样子。

Answer 1

我的中的<td>比<tbody>中的<th>更多。这可能是问题吗？尝试添加空的<thead>以匹配您的<td>头数来测试。