时间戳

首页 > 解决方案 > 刷新页面时缓存正在破坏 HTML 表

php - 刷新页面时缓存正在破坏 HTML 表

问题描述

我一直在与这个问题作斗争一段时间，但不知道为什么会这样。我基本上有一个表格，显示 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 后更改它，这就是它的样子。这就是它应该看起来的样子。 在此处输入图像描述

标签： phphtmlcsswordpress

解决方案

我<td>对你的<tbody>重视比<th>对你的重视<thead>。这可能是问题吗？尝试添加空白<td>以匹配您的<th>人数以进行测试。

推荐阅读