Why does the page data of the rounds of this table are not aligned correctly?
I would like them to be in the correct way, ie aligned like the rest of the other rounds, type 2,4,7,9 without having the feeling of left-side spacing, because every time I move to another round the data gets misaligned.
This is because no width is being applied to the td .
Some days ago I answered a similar question with this one. You can use this same hack to solve this problem. This will calculate and adjust the width of the td so that they are all the same with the same width:
tr {
width: 100%;
display: table;
table-layout: fixed;
border-collapse: separate;
border-spacing: 5px 0px;
}
td {
display: table-cell;
}
Here you also have an online example in jsFiddle: link
Or instead of applying the styles pointing to tr and td you could create a special class for this, and so whenever you need to apply this hack to whatever it is, simply add the class in Markup (HTML). For example:
.tabelaAutoAlinhada {
width: 100%;
display: table;
table-layout: fixed;
border-collapse: separate;
border-spacing: 5px 0px;
}
.celulaAutoAlinhada {
display: table-cell;
}
You can read more about this at: Horizontal Responsive List
I also noticed that you have several inline styles that are equal for each td and tr found in HTML
<td height="23" style="height: 23px; text-align: center;">Pó_de_arroz</td>
Instead of doing this as I said a little more above, you can create a class and add these styles in a single time of writing the same style consecutively for each one, reducing the size of your HTML document:
<td class="minhaTD">Pó_de_arroz</td>
And the class generated in CSS will be:
.minhaTD {height: 23px; text-align: center;}