css - 多个 ngFor 内表

Question

问题:带有图像标签 {{im.url}} 的 td 显示图像一张在另一张下方，但我需要的是水平并排显示它们，
是否可以将该 td 扩展/合并到第一行的大小，以便我可以并排放置 5 张图像？

    <tbody>
      <tr *ngFor="let row of tasks;  let i = index" colspan="6">
        <td class="text-left" >
          <b>
            <u>{{row.lowtask}}</u>
          </b>
          <tr *ngFor="let t of row.time">
            <td class="text-left">{{t.time1}}</td>
            <td class="text-center">{{t.time2}}</td>
            <td class="text-center">{{t.time3}}</td>
            <td class="text-right">{{cnvert(t.cur1)}} </td>
            <td class="text-right">{{convert(t.cur2)}} </td>                                       
          </tr>
          <tr *ngFor="let im of row.images">                                         
            <td>
              <img src="{{im.url}}" class="thumb"/>
            </td>                                                                    
          </tr>                                    
        </td>                            
      </tr>                      
     </tbody>  

Answer 1

你需要调整你的ngFor。给你:

<tbody>
   <tr *ngFor="let row of tasks;  let i = index" colspan="6">
              <td class="text-left" >
                 <b>
                     <u>{{row.lowtask}}</u>
                 </b>
                  <tr *ngFor="let t of row.time">
                     <td class="text-left">{{t.time1}}</td>
                     <td class="text-center">{{t.time2}}</td>
                     <td class="text-center">{{t.time3}}</td>
                     <td class="text-right">{{cnvert(t.cur1)}} </td>
                     <td class="text-right">{{convert(t.cur2)}} </td>                                       
                   </tr>
                   <tr>                                         
                     <td *ngFor="let im of row.images">
                       <img src="{{im.url}}" class="thumb"/>
                     </td>                                                                    
                   </tr>                                    
              </td>                            
     </tr>                      
 </tbody>