logo标签列表

多个thead/tbody的设计

jqueryhtml
13
我有一个关于可用性/设计的问题。 目前，我正在使用一些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+个（常见），这导致整个显示发生变化，我的标题成为2或3行。而我想要的是所有行都保持不变，是否有办法仅将一个tbody与一个table中的thead关联起来，以便不影响其他任何tbody。由于这可能会相当令人困惑，是否有更好的方法来实际上拥有多个表格，但每个表格的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>
2个回答
27

<thead>​中的多个元素是无效的HTML。您在 <thead> 中拥有的大部分行都包含数据而非标题，因此应该放在 <tbody> 中。

是否有办法将一个 tbody 与表格中的 1 个 thead 相关联，以便不影响其他内容？

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

如果您希望列宽度始终保持静态大小，使得各个表格之间对齐，请在每个表格上设置样式table-layout：fixed；width：100％，并在第一行的每个单元格（或更好的方式是<col>​）上设置width 样式，您不想共享等比例布局宽度。

（最好尽可能使用table-layout: fixed，因为它的渲染速度更快，而且比自动表格布局算法更可预测，特别是在IE中，当您使用colspan时，它的实现略微混乱。）

有没有一些在线参考或文章可以详细解释table-layout: auto和table-layout: fixed之间的区别？我找不到一个稳定清晰的解释，包括两者的用例。我找到了这个https://css-tricks.com/fixing-tables-long-strings/，但它只展示了例子，没有详细解释发生了什么。 - tonix
0
通常我会有4行用于实际可显示的表头（此示例为国家数据），而只有来自表头的3列被隐藏（第一行，第二行等）。 thead应该仅包括实际标题，即“国家-人口-面积-官方语言”。其余是数据，应该放在中。
您所标记的“第一行，第二行...”是列，而不是行。看起来您正在尝试隐藏第一行之后的所有行。您的表格应如下所示：
<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建议的那样。

对于第一行，第二行等的表述我向大家道歉，这只是为了测试其外观。应该是第一列，第二列等等，这些都是特定的标题。将其视为外部表头为“国家|人口|州数”，内部表头为“州|人口|GDP|失业率”，并且内部表格会有所有行。外部表头仅是为了使所有内部表格看起来相同。感谢您使用JQuery。 - Craig
啊，我明白了。如果你想要第二层标题，使用一个表格（或多个表格）嵌套在另一个表格中，而不是给一个表格多个标题部分。 - jasongetsdown
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接