Jquery 响应后，我需要小屏幕的表头，但它不工作，重复表头。因为我使用了for循环来打印页眉

我需要一个小屏幕响应后的表格标题。所以，我使用了媒体查询。有行，单击每行后将显示diff-2表格。因为不同的表有不同的标题。页眉通过循环打印。但问题是，单击后的第一行中有多少个标题。每行重复一次。例如，对于第一行，只有三个标题。这三个标题对所有其他行重复，所以请帮助我提前感谢您

    <table class="grid-table">
        <thead>
            <tr>
                <td *ngfor="let item of items.value">
                    {{item.header}}
                </td
           </tr>
    </thead>
    <tbody>
        <tr>
            <td *ngfor="let item of items.value">
                 {{item.data}}
            </td
        </tr>
    </tbody>
    </table

---

我要求以适当的可读方式提出这个问题，以便这里的任何人都能更好地帮助你。我从您的问题中了解到，所有标题的列都在重复

这是在重复列而不是行时发生的。如何*ngFor work，它将重复您应用它的元素

也许你可以这样做：-

<table class="grid-table">
    <thead>
        <tr *ngFor="let item of items.value">
            <th>{{ item.header }}</th>
       </tr>
</thead>
<tbody>
    <tr *ngFor="let item of items.value">
        <td>{{ item.data }}</td>
    </tr>
</tbody>
</table>

{{item.header}}
{{item.data}}

此外，请确保正确使用大写字母“F”表示for，如

*ngFor

，并请在HTML中使用正确的语义。我在上面的代码中使用了它：

而不是

中的

，并正确关闭

标记

希望这对你有帮助。干杯

table { 
    width: 750px; 
    border-collapse: collapse; 
    margin:50px auto;
    }

/* Zebra striping */
tr:nth-of-type(odd) { 
    background: #eee; 
    }

th { 
    background: #3498db; 
    color: white; 
    font-weight: bold; 
    }

td, th { 
    padding: 10px; 
    border: 1px solid #ccc; 
    text-align: left; 
    font-size: 18px;
    }

/* 
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

    table { 
        width: 100%; 
    }

    /* Force table to not be like tables anymore */
    table, thead, tbody, th, td, tr { 
        display: block; 
    }

    /* Hide table headers (but not display: none;, for accessibility) */
    thead tr { 
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    tr { border: 1px solid #ccc; }

    td { 
        /* Behave  like a "row" */
        border: none;
        border-bottom: 1px solid #eee; 
        position: relative;
        padding-left: 50%; 
    }

    td:before { 
        /* Now like a table header */
        position: absolute;
        /* Top/left values mimic padding */
        top: 6px;
        left: 6px;
        width: 45%; 
        padding-right: 10px; 
        white-space: nowrap;
        /* Label the data */
        content: attr(data-column);

        color: #000;
        font-weight: bold;
    }

}

名字
姓
职位名称
啁啾
詹姆斯
护士长
主食三明治者
@詹姆斯
安道尔
纳吉
设计师
@安道尔纳吉
塔马斯
比罗
游戏测试员
@塔马斯
佐利
马斯塔
开发商
@佐利
萨比
纳吉
主食三明治者
@萨比

这使得响应问题得以解决。接下来，使用angular在html中添加任何内容

table { 
    width: 750px; 
    border-collapse: collapse; 
    margin:50px auto;
    }

/* Zebra striping */
tr:nth-of-type(odd) { 
    background: #eee; 
    }

th { 
    background: #3498db; 
    color: white; 
    font-weight: bold; 
    }

td, th { 
    padding: 10px; 
    border: 1px solid #ccc; 
    text-align: left; 
    font-size: 18px;
    }

/* 
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

    table { 
        width: 100%; 
    }

    /* Force table to not be like tables anymore */
    table, thead, tbody, th, td, tr { 
        display: block; 
    }

    /* Hide table headers (but not display: none;, for accessibility) */
    thead tr { 
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    tr { border: 1px solid #ccc; }

    td { 
        /* Behave  like a "row" */
        border: none;
        border-bottom: 1px solid #eee; 
        position: relative;
        padding-left: 50%; 
    }

    td:before { 
        /* Now like a table header */
        position: absolute;
        /* Top/left values mimic padding */
        top: 6px;
        left: 6px;
        width: 45%; 
        padding-right: 10px; 
        white-space: nowrap;
        /* Label the data */
        content: attr(data-column);

        color: #000;
        font-weight: bold;
    }

}