html - 更改表格第一行的字体大小和颜色

Question

我想显示板球队的详细信息。表格的第一行是船长，所以对于第一行的每种颜色，我想将字体大小设置为绿色和粗体

这是我的 HTML:

 <div >
     <table id="sports" border=1 align=center >
         <thead >
         <tr>
             <th>Team1</th>
             <th>Team2</th>
         </tr>
         </thead>
         <tbody  *ngFor="let T of Teams" >
                 <td> {{T.Indian_players}}</td>
                 <td>{{T.Australia_players}}</td>
             </tr>
         </tbody>
     </table>
</div>

这是我的模型，我在其中获取了静态数据:

export const Players=[
        {Indian_players:'Kohili(c)',Australia_players:'David Warner(c)',Pakistan_players:'shaheen Afridi(c)',Southafrica_players:'dale steyn(c)',England_players:'Harry Kane(c)'},
        {Indian_players:' Dhoni',Australia_players:'Steve Smith',Pakistan_players:'sarfraz Ahmed',Southafrica_players:'du plessis',England_players:'Joe Root'},
        {Indian_players:'Rohit Sharma',Australia_players:'Glen Maxwell',Pakistan_players:'Babar Azam',Southafrica_players:'Imran Tahir',England_players:'Alex Hales'},
        {Indian_players:'Jadeja',Australia_players:'Aron Finch',Pakistan_players:'Mohamad Hafeez',Southafrica_players:'David Miller',England_players:'James Anderson'},
        {Indian_players:'K.L.Rahul',Australia_players:'Mitchel Starc',Pakistan_players:'Imad Wasim',Southafrica_players:'Jp duminy',England_players:'Moeen Ali'},
        {Indian_players:'Bhuvaneswar Kumar',Australia_players:'Travis Head',Pakistan_players:'Shadab khan',Southafrica_players:'de kock',England_players:'Jos Buttler'},
        {Indian_players:'Shikar Dhawan',Australia_players:'Pat cummins',Pakistan_players:'yasir shah',Southafrica_players:'Hashim Amla',England_players:'Ben Strokes'},
        {Indian_players:'RishabPanth',Australia_players:'Mitchel Marsh',Pakistan_players:'Imam-ul-haq',Southafrica_players:'chris morris',England_players:'Sam Billings'},
        {Indian_players:'Ashwin',Australia_players:'Peter siddle',Pakistan_players:'Faheem Ashraf',Southafrica_players:'Aiden markram',England_players:'Eoin Morgan'},
        {Indian_players:'Dinesh Karthik',Australia_players:'Tim Paine',Pakistan_players:'Shoib Malik',Southafrica_players:'Dean Elgar',England_players:'chris Woakes'},

Answer 1

您可以执行以下操作。

<tbody>
    <tr *ngFor="let T of Teams; let i = index" [class.your-captain-css-class]="index===0">
        <td> {{T.Indian_players}}</td>
        <td>{{T.Australia_players}}</td>
    </tr>
</tbody>

我已经完成了以下操作。

1. 获取索引和对象。
2. 如果索引为 0，则添加类。

这是满足您的要求。还有另一种仅通过 CSS 实现的方法。