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

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

你可以用 CSS 做到这一点

custom-class:first-child { 
   color: yellow;
   font-size: 15px;
}

另外，您的示例中有一个错误，一个结束 tr 标记，但正文中没有开始 tr 标记

<tbody  *ngFor="let T of Teams" >
       <td> {{T.Indian_players}}</td>
       <td>{{T.Australia_players}}</td>
     </tr>
</tbody>

我相信在阅读完 cmets 之后，您可以/应该这样做，并在顶部使用 CSS，这一切都应该有效，我建议使用 class 而不是 tr 的原因是，如果您使用 tr，您已经使用了 tr 更多然后一次，它会影响所有 tr 标签，而不仅仅是你想要的那个。

 <tbody>
    <tr *ngFor="let T of Teams" class="custom-class">
        <td> {{T.Indian_players}}</td>
        <td>{{T.Australia_players}}</td>
    </tr>
</tbody>

Answer 2

您可以执行以下操作。

<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 实现的方法。