So i have this table:
<table style="border-collapse: separate; border-spacing: 6px;">
<tbody>
<thead>
<tr>
<th>No</th>
<th>Nome</th>
<th>Quantidade</th>
<th>Preço</th>
</tr>
</thead>
<tr style="border-bottom: 1px red;">
<td>text1</td>
<td>text2</td>
<td>text3</td>
<td>text4</td>
</tr>';
</tbody>
</table>
<hr style="margin: 0px;">
<table>
<tbody>
<tr align="right">
<td>
<h5 style="color:#F00"align="right">Total : 1250.8€ </h5>
</td>
</tr>
</tbody>
</table>
</div>
<table>
<h5>
Your markup is weird and in parts erroneous:
<tbody>
and <thead>
are supposed to be siblings, not children of each other<hr />
should only be within <td>
- or <th>
-tagsI'm not sure what exactly is the bug you mention, but it's most likely caused by those errors. Also, displaying two tables underneath each other will likely give you unwanted results, as all the cool things about tables - the horizontal alignment of seperate rows - will be lost.
That being said, here's a fixed version that incorporates what I deem to be tidy markup (all style properties are done via CSS, not inline styles, which is easier to maintain), proper html structure and achieving what I'm guessing you want:
table.price-list {
border-collapse: separate;
border-spacing: 6px;
text-align: center;
}
table.price-list tbody tr:last-child td {
border-top: 1px solid #ddd;
color: red;
text-align: right;
}
<table class="price-list">
<thead>
<tr>
<th>No</th>
<th>Nome</th>
<th>Quantidade</th>
<th>Preço</th>
</tr>
</thead>
<tbody>
<tr>
<td>text1</td>
<td>text2</td>
<td>text3</td>
<td>text4</td>
</tr>
<tr>
<td colspan="4">Total : 1250.8€</td>
</tr>
</tbody>
</table>