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>

这看起来像坏了：

如果我禁用缓存或在加载css后更改它，这是什么样子。这就是它的外观。

Answer 1

与您的<td>中的<tbody>相比，您的<th>中的<thead>计数更多。这可能是问题吗？尝试添加空的<td>以匹配您的<th>人数进行测试。

刷新页面时缓存破坏了HTML表

1 个答案: