How to match table <td></td> based on <th></th> in Umbraco

Question

i have some issues trying to match th with the td elements on the table, my code works fine but i shows the data but not in order of the th. What can i do to make this works as pretend?? Any Help would be apreciated

My Code

<div class="table-responsive ">
                <table class="table table-striped ">
                  <thead>
                    <tr>
                      <th scope="col">Fundo</th>
                      <th scope="col">IFI</th>
                      <th scope="col">Prospeto</th>
                      <th scope="col">KiiD</th>
                      <th scope="col">Mercado Alvo</th>
                      <th scope="col">Síntese Mensal</th>
                      <th scope="col">Relatório Mensal</th>
                      <th scope="col">Relatório Semestral</th>
                      <th scope="col">Relatório Anual</th>
                    </tr>
                  </thead>
                 <tbody>

                     @foreach (var page in selection.Children){

                        if(page.Children.Count() > 0){ 

                        foreach(var subpage in page.Children){

                            var listaPdf = subpage.GetPropertyValue<IEnumerable<IPublishedContent>>("listaPdfsFundos");

                               if(listaPdf == null) {
                                    listaPdf = new List<IPublishedContent>();
                                }

                                 <tr>

                                 <td >@subpage.Name</td>

                                 @if(listaPdf != null){

                                    foreach(var row in listaPdf) {

                                    var name = Umbraco.Field(row, "categoriaDoFundo");

                                    var id = Umbraco.Field(row, "documentos").ToString();

                                    var mediaItem = Umbraco.TypedMedia(id);

                                    var url = mediaItem.Url;

                                    <td> <a href="@url" target="_blank"><i class="far fa-file-pdf"></i> </a> </td>

                                    }   
                                }   
                       </tr>    
                    }
                }
             }

              </div>

Answer 1

This is all to do with the structure of your data and the way you are trying to lay it out in a table that has a fixed number of columns

Anyway from your picture and your html, it looks like you have 9 columns.

You populate listaPdf with

var listaPdf = subpage.GetPropertyValue<IEnumerable<IPublishedContent>>("listaPdfsFundos");`

A little after that, you write the first column

<td >@subpage.Name</td>

which is definitely okay. So that is 1 column down and 8 to go.

Now your problems start. In order for your code to work, you must write out 8 * <td> items in order to match your <th> headers (1 already written) + 8).

If listaPdf does not contain exactly 8 items then it is not going to work. Your picture above suggests that listPdf contained 3 items so you have written out 4 * <td> which do not match up with the 9 * <th>

So the first thing to check is whether listaPdf contains 8 items. If it doesn't you cannot make the above code work without finding some way to link each mediaItem to the correct column.

Is there anything in each mediaItem that links that item to the correct column?