刷新頁面時緩存正在破壞 HTML 表

Question

我一直在與這個問題作斗爭一段時間，但無法找出它發生的原因。 我基本上有一個表格，它顯示 Woocommerce 變體，每個變體都在它自己的行中。 我遇到的問題是刷新頁面時， <th>行折疊並且與tbody不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

我在你的<tbody>計算的<td>比在你的<thead> <th> <thead> 。 這可能是問題嗎？ 嘗試添加空<td>以匹配要測試的<th>人數。