HTML/CSS表格页脚没有对齐

Question

所以我有这张桌子:

 <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>

这是输出:

我尝试了所有不同类型的对齐(float,align-content,做另一个表,做另一个td).

我认为这不是一个很好的实践,<table>但这是我能得到的.我如何正确对齐<h5>(总计:)并使代码更整洁？

Answer 1

你的标记很奇怪而且部分错误:

• 有一个永不打开的结束div标签(我认为这是一个copypaste错误而不是标记错误)
• <tbody>并且<thead>应该是兄弟姐妹,而不是彼此的孩子
• 非表标记,例如<hr />应该只在<td>- 或<th>-tags内
• 由于可读性和可维护性,使用标题标签用于非格式化目的不如CSS解决方案 - 它似乎仅用于对齐文本,这也是CSS应该由于兼容性原因而处理的问题

我不确定你提到的错误究竟是什么,但这很可能是由那些错误引起的.此外,在彼此之下显示两个表可能会给您带来不必要的结果,因为关于表的所有很酷的东西 - 单独行的水平对齐 - 将会丢失.

话虽这么说,这里有一个固定的版本,采用了什么,我认为要整齐标记(所有样式属性通过CSS进行,而不是内联样式,这是更容易维护),正确的HTML结构,实现什么我猜你想要的:

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>