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关联在表中，这样它就不会影响任何其他行。因为这可能是相当混乱的，有一个更好的方法来实际拥有多个表，但每个表的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>是无效的HTML。您在<thead>中拥有的大多数行都包含数据而非标题，因此应包含在<tbody>中。

有没有办法在表格中仅将1个tbody与1个thead相关联，这样就不会影响其他任何人。

是的，请使用单独的表格。

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

（尽可能使用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所说的那样。

多个thead / tbody设计

2 个答案: