多个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 替代文字http://img822.imageshack.us/img822/9206/screenshot20100708at101.png

现在我实际上这样做的原因是因为通常我将有4行用于实际的可显示标题(这个例子是国家数据)并且标题中只有3列被隐藏(第一行,第二行等).内部的这个数据有1行是一个URL,可以是10个字符到100+(100+是常见的),这导致整个显示变化,我的标题变为2或3行.虽然我想要的是所有的行保持不变,但是有任何方法只能将1个tbody与1个thead关联在表中,这样它就不会影响任何其他行.因为这可能是相当混乱的,有一个更好的方法来实际拥有多个表,但每个表的thead都保持不变,无论为tbody输入的数据.我知道会有问题,但任何帮助都会非常感激,并注意我完全愿意以不同的方式这样做.然而,所需要的是可以隐藏作为表的数据并且将具有该信息的头部.可以有一个不必匹配的可显示部分(可能是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>s中拥有的大多数行都包含数据而不是标题,所以应该在a中<tbody>.

是否有任何方法只将1个人与1个thead关联在表内,这样就不会影响其他任何人.

是的,请使用单独的表格.

如果您希望列宽一直是静态大小以使表彼此对齐,请table-layout: fixed; width: 100%在每个表上设置width样式,并在第一行中的每个单元格上设置样式(或者更好的<col>s )您不希望共享相同比例的布局宽度.

(table-layout: fixed尽可能使用它是一个好主意,因为渲染速度更快,并且比自动表格布局算法更具可预测性,尤其是在IE中,特别是在使用时,它会略微混乱colspan.)