响应后，我需要小屏幕的表头，但它不能工作，它重复表格标题。因为我已经使用for循环打印标头

Question

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

    <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

我的css

    grid-table {
    td:nth-of-type(1):before {
             content: "Groceries  (Monthly):";
          }
          td:nth-of-type(2):before {
             content: "Milk  (Monthly):";
          }
          td:nth-of-type(3):before {
             content: "Cafeteria  (Monthly):";
          }
          td:nth-of-type(4):before {
             content: "Fuel  (Monthly):";
          }
          td:nth-of-type(5):before {
              content: "Maintenance  (Annual):";
          }
          td:nth-of-type(6):before {
              content: "Local Commuting  (Monthly):";
          }

        and so on...

    }

Answer 1

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

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

也许你可以这样做：-

<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>

另外，请确保以大写字母“F”作为*ngFor正确地提到了for，并请在您的HTML中使用适当的语义。我在上面的代码中使用了它：<th>而不是<td>在<thead>中，并正确地关闭了<table>标记。

希望这能帮到你。干杯!

Answer 2

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;
    }

}

<table>
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Job Title</th>
      <th>Twitter</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-column="First Name">James</td>
      <td data-column="Last Name">Matman</td>
      <td data-column="Job Title">Chief Sandwich Eater</td>
      <td data-column="Twitter">@james</td>
    </tr>
    <tr>
      <td data-column="First Name">Andor</td>
      <td data-column="Last Name">Nagy</td>
      <td data-column="Job Title">Designer</td>
      <td data-column="Twitter">@andornagy</td>
    </tr>
    <tr>
      <td data-column="First Name">Tamas</td>
      <td data-column="Last Name">Biro</td>
      <td data-column="Job Title">Game Tester</td>
      <td data-column="Twitter">@tamas</td>
    </tr>
    <tr>
      <td data-column="First Name">Zoli</td>
      <td data-column="Last Name">Mastah</td>
      <td data-column="Job Title">Developer</td>
      <td data-column="Twitter">@zoli</td>
    </tr>
    <tr>
      <td data-column="First Name">Szabi</td>
      <td data-column="Last Name">Nagy</td>
      <td data-column="Job Title">Chief Sandwich Eater</td>
      <td data-column="Twitter">@szabi</td>
    </tr>
  </tbody>
</table>

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