HTML/CSS表格页脚未右对齐

我有一张桌子：

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

不
诺姆
量子化
普雷西奥
文本1
文本2
文本3
文本4
';

总计：1250.8欧元

这是输出：

我尝试了所有不同类型的右对齐（浮动、对齐内容、创建另一个表、创建另一个td）

---

我认为这不是一个很好的

实践，但这是我所能做到的。如何将

（总计：）向右对齐并使代码更整洁？

一种可能的解决方案是在第二个表中添加一些id，如

，然后按如下方式设置样式：

#second{
  float:right;
}

看

---

（或者只需执行

，但最好将样式保留在css中）

使用

tfoot

和

colspan

正文{
背景：浅蓝色；
}
桌子{
背景：#eee；
}
tr：最后一个孩子{
文本对齐：右对齐；
}
tfoot tr td{
边框顶部：1px纯色浅灰色；
}
h5{
颜色：红色；
}

不
诺姆
量子化
普雷西奥
文本1
文本2
文本3
200.00€
总计：1250.80欧元

这可以帮助您

<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>
     <tr align="right">
     <td colspan=4 align="right">
     <h5 style="color:red">Total : 1250.8€ </h5>
     </td>
     </tr>
     </tbody>
     </table>
     </div>

不
诺姆
量子化
普雷西奥
文本1
文本2
文本3
文本4
总计：1250.8欧元

您的标记很奇怪，而且部分错误：

• 有一个永远不会打开的结束div标记（我认为这是一个复制粘贴错误，而不是标记错误）

• 和
  应该是兄弟姐妹，而不是彼此的孩子
• 非表标记，如
  应仅位于
  -或
  -标记内
• 由于可读性和可维护性，将标题标记用于非格式化目的不如CSS解决方案好——这里似乎只用于对齐文本，出于兼容性的原因，CSS也应该处理这一点

我不确定您提到的错误到底是什么，但它很可能是由这些错误引起的。另外，将两个表显示在另一个表下面可能会产生不想要的结果，因为所有关于表的酷的东西——分离行的水平对齐——都将丢失

也就是说，这里有一个固定版本，它包含了我认为整洁的标记（所有样式属性都是通过CSS完成的，而不是内联样式，这更易于维护）、正确的html结构，并实现了我猜您想要的：

table.price-list{
边界塌陷：分离；
边界间距：6px；
文本对齐：居中；
}
表1.价目表tbody tr：最后一个孩子td{
边框顶部：1px实心#ddd；
颜色：红色；
文本对齐：右对齐；
}

不
诺姆
量子化
普雷西奥
文本1
文本2
文本3
文本4
总计：1250.8欧元

试试这个。你可能想玩到你想要的样子

<style type="text/css">

html, body {    
    font-family: arial;
    margin: 0;
    padding: 0;
    }

table, th, td {
    width: 500px;
    height: 50px;
    border: 1px solid #000;
    border-collapse: collapse;
    padding: 5px 10px;
    margin: 20px;
    text-align: left;
    }

.total {
    text-align: right;
    }

</style>


<table>
    <tr>
        <th>No</th>
        <th>Nome</th>
        <th>Quantidade</th>
        <th>Preço</th>               
    </tr>


    <tr>
        <td>Text 1</td>
        <td>Text 2</td>
        <td>Text 3</td>
        <td>Text 4</td>
    </tr>


    <tr>
        <td>Total : </td>
        <td class="total">1250.8€</td>
    </tr>
</table>

html，正文{
字体系列：arial；
保证金：0；
填充：0；
}
表，th，td{
宽度：500px；
高度：50px；
边框：1px实心#000；
边界塌陷：塌陷；
填充物：5px10px；
利润率：20px；
文本对齐：左对齐；
}
.总数{
文本对齐：右对齐；
}
不
诺姆
量子化
普雷西奥
文本1
文本2
文本3
文本4
总数：
1250.8€

如果需要，可以使用div

不
诺姆
量子化
普雷西奥
文本1
文本2
文本3
文本4
';

总计：1250.8欧元

您看过html标记中的colspan属性了吗？像then align Right之类的东西它可以工作，但是现在我的

---

不能一直向下。使用border top而不是hr标记怎么样？第二个表的目的是什么？我保持这种方式，因为我认为OP希望

---

具有全宽。