Table alignment

Question

Why is the page data of the rounds of this table are not aligned correctly?

I’d like them to stay the right way, or be aligned like the rest of the other rounds, like2,4,7,9 without having the feeling of spacing on the left side, as every time I step to another round the data is misaligned.

Answer 1

That’s because no width is being applied to td.
I answered a few days ago similar question with this. You can use this same hack to solve this problem. This will calculate and adjust the width of td so that they are all equal to the same width:

tr {
  width: 100%;
  display: table;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 5px 0px;
}
td {
  display: table-cell;
}

Here’s also an online jsFiddle example: http://jsfiddle.net/vj6q6bkz

Or instead of applying the styles pointing to the tr and td you could create a special class for this, so whenever you need to apply this "hack" to anything, just 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 on: Responsive Horizontal List
I also noticed that you have several inline styles equal for each td and tr that are in HTML

<td height="23" style="height: 23px; text-align: center;">Pó_de_arroz</td>

Instead of doing this as I said earlier, you can create a class and add these styles at once by writing the same style consecutively for each of them, 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;}