多個thead/tbody設計

Question

我有一個關於可用性/設計的問題。 我目前正在使用一些JQuery來隱藏/顯示整個區域。目前這些都在一張大桌子上，頂部有一個thead作爲主標題，然後是第二個thead，它是所顯示內容的標題。接下來是另一個thead，它是在tbody中顯示的任何被隱藏的標題。 我知道這是可怕的風格，但我想克服的問題是我希望所有行都相同，因爲它們都顯示相同類型的數據。

代碼示例

<table id="report"> 
    <thead> 
    <tr id="header"> 
     <th>Country</th> 
     <th>Population</th> 
     <th>Area</th> 
     <th>Official languages</th> 
     <th></th> 
    </tr> 
    </thead> 

    <thead> 
    <tr> 
     <td>United States of America</td> 
     <td>306,939,000</td> 
     <td>9,826,630 km2</td> 
     <td>English</td> 
     <td><div class="arrow"></div></td> 
    </tr> 
    </thead> 

    <thead> 
     <tr> 
      <td>First Row</td> 
      <td>Second Row</td> 
      <td>Third Row</td> 
      <td>Fourth Row</td> 
      <td>Fifth Row</td> 
     </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td colspan="5"> 
      <img src="../125px-Flag_of_the_United_States.svg.png" alt="Flag of USA" /> 
      <h4>Additional information</h4> 
      <ul> 
       <li><a href="http://en.wikipedia.org/wiki/Usa">USA on Wikipedia</a></li> 
       <li><a href="http://nationalatlas.gov/">National Atlas of the United States</a></li> 
       <li><a href="http://www.nationalcenter.org/HistoricalDocuments.html">Historical Documents</a></li> 
      </ul> 
     </td> 
    </tr> 
      <tr><td>some other stuff</td></tr> 
    </tbody> 
</table> 

下面就是將顯示： alt text http://img694.imageshack.us/img694/9773/screenshot20100708at100.png alt text http://img822.imageshack.us/img822/9206/screenshot20100708at101.png

現在我之所以實際上是由這種方式，是因爲通常我都會有4行的實際可顯示標題（這個例子是國家數據），只有3個標題欄被隱藏（第一行，第二行等）。這裏面的數據有1行是一個URL，可以是從10個字符到100+（100+是常見的）的任何地方，這導致整個顯示改變並且我的標題變爲2或3行。雖然我想讓所有行保持不變，但有什麼方法可以將表中的1個tbody與1個thead關聯起來，這樣它就不會影響其他任何其他行。由於這可能會讓人困惑，因爲實際上有多個表格的更好的方法，但是每個表格的副本都保持不變，而不管輸入的數據是什麼。 我知道會有問題，但任何幫助將不勝感激，並注意我完全打開做這個不同的方式。然而，需要的是，數據可以隱藏起來，並且會有一個表格，並且會有一個信息頭。可以有一個不需要匹配的可顯示部分（它可能是一個div），每個部分內部的數據應該保持相同的格式。

PS：如果以下感興趣的是我用於整個事情的JQuery。

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $("#report thead").children("tr:odd").not("#header").addClass("odd"); 
     $("#report thead").children("tr:odd").not("#header").each(function(index){$(this).attr("id", "id" + index);}); 

     $("#report thead").children("tr:even").not("#header").addClass("bodyhead"); 
     $("#report thead:even").not(":first-child").each(function(index){$(this).attr("id", "bhid" + index);}); 

     $("#report tbody").each(function(index){$(this).attr("id", "bid" + index);}); 
     //$("#report tbody").each(function(index){$(this).attr("id", "id" + index);}); 
     //$("#report tbody").children("tr:not(.odd)").hide(); 
     $("#report tbody").hide(); 
     $("#report thead:even").not(":first-child").hide(); 

     //$("#report tbody #id0").show(); 
     //For header of headers. 
     $("#report thead").children("tr:first-child").show(); 
     $("#report thead").children("tr").not("#header").not(".bodyhead").click(function(){ 
      $("#report #b" + this.id).toggle(); 
      $("#report #bh" + this.id).toggle(); 
      $(this).find(".arrow").toggleClass("up"); 
     }); 
    }); 
</script> 

Answer 1

多個<thead> s在表中是無效的HTML。你在<thead>中的大部分行都包含數據而不是標題，所以應該在<tbody>。

有沒有什麼辦法可以把表裏面的1個tbody關聯起來，這樣它就不會影響到其他任何人。

是的，請使用單獨的表格。

如果希望列寬一直是靜態大小，以便表格彼此排列，請在每個表上設置樣式table-layout: fixed; width: 100%，並在第一行中的每個單元格上設置width樣式（或更好的<col>），你不想分享相同比例的佈局寬度。

（儘可能使用table-layout: fixed是個好主意，因爲它比渲染速度更快，並且比自動錶格佈局算法更具可預測性，特別是在IE中，它有一個稍微混亂的實現，特別是當你使用colspan。）

Answer 2

一般我將有4行的 實際可顯示的報頭（此 例子是國家數據）和從頭部僅 3列被隱藏 （第一行，第二等）。

的thead應該只包括實際的標題，即「國家 - 人口 - 地區 - 官方語言」剩下的就是數據，並在TBODY所屬。

您標記爲「第一行第二行」的是列而不是行。看起來你想要隱藏第一行之後的所有行。你的表應該是這樣的：

<table id="report"> 
    <thead> 
    <tr id="header"> 
     <th>Country</th> 
     <th>Population</th> 
     <th>Area</th> 
     <th>Official languages</th> 
     <th></th> 
    </tr> 
    </thead> 

    <tbody> 
    <tr> 
     <td>United States of America</td> 
     <td>306,939,000</td> 
     <td>9,826,630 km2</td> 
     <td>English</td> 
     <td id="tableToggle"><div class="arrow"></div></td> 
    </tr> 
    <tr> 
     <td>First Row</td> 
     <td>Second Row</td> 
     <td>Third Row</td> 
     <td>Fourth Row</td> 
     <td>Fifth Row</td> 
    </tr> 
    <tr> 
     <td colspan="5"> 
      <img src="../125px-Flag_of_the_United_States.svg.png" alt="Flag of USA" /> 
      <h4>Additional information</h4> 
      <ul> 
       <li><a href="http://en.wikipedia.org/wiki/Usa">USA on Wikipedia</a></li> 
       <li><a href="http://nationalatlas.gov/">National Atlas of the United States</a></li> 
       <li><a href="http://www.nationalcenter.org/HistoricalDocuments.html">Historical Documents</a></li> 
      </ul> 
     </td> 
    </tr> 
    <tr> 
     <td>some other stuff</td> 
    </tr> 
    </tbody> 
</table> 

你可以隱藏第一個像這樣的東西畢竟行（假設他們開始隱藏）：

$('#tableToggle').toggle(
    function() { 
     $(this).nextAll().show(); 
    }, 
    function() { 
     $(this).nextAll().hide(); 
    }); 

如果你有一個以上的可隱藏部分在同一個表中系列使用

$(this).nextAll().slice(0, n).show(); 

其中n是行中的區段數。或者您可以爲每個可隱藏部分使用新表格。

該數據內有1個行是一個URL ，可以是從10個 字符的任何地方，以100+（100+共同地） ，這導致在整個顯示 改變和我的頭成爲2或3 線。

我不明白你在說什麼，但它聽起來像是可以通過控制樣式表中的表的尺寸來解決的，正如bobince的建議。