嵌套表不能正常工作

我試圖「嵌套」（不知道這是否合適）。我不想在每個單元格中放置一個表格，而是需要使用適當的標題來組織表格。我的工程師告訴我，我不能簡單地設計一個表來「看」嵌套，相反，如果每個頭都包裹了子行和單元格，那就更好了。嵌套表不能正常工作

下面是它應該是什麼樣子的屏幕截圖：

enter image description here

這裏是我的HTML：

<section class="container"> 
    <table class="zebra"> 
     <thead> 
      <tr> 
       <th>Code</th> 
       <th>Procedure</th> 
       <th>Units</th> 
       <th>Charge</th> 
       <th>Avg. Charge</th> 
       <th>As %</th> 
      </tr> 
     </thead> 
     <tbody class="level1"> 
      <tr> 
       <td colspan="6"> 
        <i class="doctor"></i>John Dorian 
       </td> 
      </tr> 
      <tbody class="level2"> 
       <tr> 
        <td colspan="6"> 
         <i class="address"></i>Southern Hills Hospital 
        </td> 
       </tr> 
       <tbody class="level3"> 
        <tr> 
         <td>99234</td> 
         <td>Chest XRay</td> 
         <td>1</td> 
         <td>20.00</td> 
         <td>40.00</td> 
         <td>10.00</td> 
        </tr> 
        <tr> 
         <td>99234</td> 
         <td>Chest XRay</td> 
         <td>1</td> 
         <td>20.00</td> 
         <td>40.00</td> 
         <td>10.00</td> 
        </tr> 
        <tr> 
         <td>99234</td> 
         <td>Chest XRay</td> 
         <td>1</td> 
         <td>20.00</td> 
         <td>40.00</td> 
         <td>10.00</td> 
        </tr> 
       </tbody> 
      </tbody> 
     </tbody> 
     <tbody class="level1"> 
      <tr> 
       <td colspan="6"> 
        <i class="doctor"></i>John Dorian 
       </td> 
      </tr> 
      <tbody class="level2"> 
       <tr> 
        <td colspan="6"> 
         <i class="address"></i>Southern Hills Hospital 
        </td> 
       </tr> 
       <tbody class="level3"> 
        <tr> 
         <td>99234</td> 
         <td>Chest XRay</td> 
         <td>1</td> 
         <td>20.00</td> 
         <td>40.00</td> 
         <td>10.00</td> 
        </tr> 
        <tr> 
         <td>99234</td> 
         <td>Chest XRay</td> 
         <td>1</td> 
         <td>20.00</td> 
         <td>40.00</td> 
         <td>10.00</td> 
        </tr> 
        <tr> 
         <td>99234</td> 
         <td>Chest XRay</td> 
         <td>1</td> 
         <td>20.00</td> 
         <td>40.00</td> 
         <td>10.00</td> 
        </tr> 
       </tbody> 
      </tbody> 
      <tbody class="level2"> 
       <tr> 
        <td colspan="6"> 
         <i class="address"></i>Southern Hills Hospital 
        </td> 
       </tr> 
       <tbody class="level3"> 
        <tr> 
         <td>99234</td> 
         <td>Chest XRay</td> 
         <td>1</td> 
         <td>20.00</td> 
         <td>40.00</td> 
         <td>10.00</td> 
        </tr> 
        <tr> 
         <td>99234</td> 
         <td>Chest XRay</td> 
         <td>1</td> 
         <td>20.00</td> 
         <td>40.00</td> 
         <td>10.00</td> 
        </tr> 
        <tr> 
         <td>99234</td> 
         <td>Chest XRay</td> 
         <td>1</td> 
         <td>20.00</td> 
         <td>40.00</td> 
         <td>10.00</td> 
        </tr> 
       </tbody> 
      </tbody> 
      <tbody class="level2"> 
       <tr> 
        <td colspan="6"> 
         <i class="address"></i>Southern Hills Hospital 
        </td> 
       </tr> 
       <tbody class="level3"> 
        <tr> 
         <td>99234</td> 
         <td>Chest XRay</td> 
         <td>1</td> 
         <td>20.00</td> 
         <td>40.00</td> 
         <td>10.00</td> 
        </tr> 
        <tr> 
         <td>99234</td> 
         <td>Chest XRay</td> 
         <td>1</td> 
         <td>20.00</td> 
         <td>40.00</td> 
         <td>10.00</td> 
        </tr> 
        <tr> 
         <td>99234</td> 
         <td>Chest XRay</td> 
         <td>1</td> 
         <td>20.00</td> 
         <td>40.00</td> 
         <td>10.00</td> 
        </tr> 
       </tbody> 
      </tbody> 
     </tbody> 
    </table>

所以你可以看到我其他tbody秒鐘內嵌套tbody。這在Chrome中呈現很好。事實上，這就是我想要的樣子。

但

當我檢查元素，我看到瀏覽器（和Safari和Firefox）基本上說：「新加坡國立大學醫院嗯」，打破了嵌套tbody出去了。見這裏：

任何想法如何完成我想要在這裏？

enter image description here

來源

2013-01-25 Mitch Malone

您是否試圖將每個包裝在

？ –

一個tbody不能有一個tbody孩子 – Musa

是的，我猜這就是這種情況。試圖驗證它。沒通過。反正有沒有完成這個沒有JS？ –

回答

我認爲你是在解決方案複雜化。鑑於你提供的截圖，不需要嵌套。你的工程師是錯誤的，你可以設計一個表來嵌套。

刪除嵌套的tbodys，並使用tr以及與其關聯的類。
根據其深度對每個級別進行樣式設置。我將每個td中的第一個td作爲目標，以應用padding-left值使其看起來嵌套。

這裏是的jsfiddle：http://jsfiddle.net/msV2U/

CSS：

body { font-family: arial; } 

table { width: 100%; } 

thead th { background-color: #f6f6f6; padding: 5px; } 
table td { border: 1px solid #DDD; padding: 5px; } 

tr.level1 td { font-weight: bold ;} 
tr.level2 td:first-child, 
tr.level3 td:first-child { padding-left: 25px; }

和HTML：

<table class="zebra"> 
    <thead> 
     <tr> 
      <th>Code</th> 
      <th>Procedure</th> 
      <th>Units</th> 
      <th>Charge</th> 
      <th>Avg. Charge</th> 
      <th>As %</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr class="level1"> 
      <td colspan="6"> 
       <i class="doctor"></i>John Dorian 
      </td> 
     </tr> 
     <tr class="level2"> 
      <td colspan="6"> 
       <i class="address"></i>Southern Hills Hospital 
      </td> 
     </tr> 
     <tr class="level3"> 
      <td>99234</td> 
      <td>Chest XRay</td> 
      <td>1</td> 
      <td>20.00</td> 
      <td>40.00</td> 
      <td>10.00</td> 
     </tr> 
     <tr class="level3"> 
      <td>99234</td> 
      <td>Chest XRay</td> 
      <td>1</td> 
      <td>20.00</td> 
      <td>40.00</td> 
      <td>10.00</td> 
     </tr> 
     <tr class="level3"> 
      <td>99234</td> 
      <td>Chest XRay</td> 
      <td>1</td> 
      <td>20.00</td> 
      <td>40.00</td> 
      <td>10.00</td> 
     </tr> 
     <tr class="level1"> 
      <td colspan="6"> 
       <i class="doctor"></i>John Dorian 
      </td> 
     </tr> 
     <tr class="level2"> 
      <td colspan="6"> 
       <i class="address"></i>Southern Hills Hospital 
      </td> 
     </tr> 
     <tr class="level3"> 
      <td>99234</td> 
      <td>Chest XRay</td> 
      <td>1</td> 
      <td>20.00</td> 
      <td>40.00</td> 
      <td>10.00</td> 
     </tr> 
     <tr class="level3"> 
      <td>99234</td> 
      <td>Chest XRay</td> 
      <td>1</td> 
      <td>20.00</td> 
      <td>40.00</td> 
      <td>10.00</td> 
     </tr> 
     <tr class="level3"> 
      <td>99234</td> 
      <td>Chest XRay</td> 
      <td>1</td> 
      <td>20.00</td> 
      <td>40.00</td> 
      <td>10.00</td> 
     </tr> 
     <tr class="level1"> 
      <td colspan="6"> 
       <i class="doctor"></i>John Dorian 
      </td> 
     </tr> 
     <tr class="level2"> 
      <td colspan="6"> 
       <i class="address"></i>Southern Hills Hospital 
      </td> 
     </tr> 
     <tr class="level3"> 
      <td>99234</td> 
      <td>Chest XRay</td> 
      <td>1</td> 
      <td>20.00</td> 
      <td>40.00</td> 
      <td>10.00</td> 
     </tr> 
     <tr class="level3"> 
      <td>99234</td> 
      <td>Chest XRay</td> 
      <td>1</td> 
      <td>20.00</td> 
      <td>40.00</td> 
      <td>10.00</td> 
     </tr> 
     <tr class="level3"> 
      <td>99234</td> 
      <td>Chest XRay</td> 
      <td>1</td> 
      <td>20.00</td> 
      <td>40.00</td> 
      <td>10.00</td> 
     </tr> 
    </tbody> 
</table>

來源

2013-01-25 00:28:02 Axel

這幾乎完全是我做過標記和風格時，他們告訴我這不起作用。所以實際上我和工程師進行了覈對，結果發現還有一些其他的功能，我沒有對這些情況進行修改，這會改變這種情況。我會將其標記爲關閉。感謝您的時間和幫助。 –

-1

新信息曝光後，這問題已不再適用。謝謝。

來源

2013-01-25 00:37:44

相關問題