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> 

这是输出：

我已经尝试了所有不同类型的右对齐（浮动，对齐内容，做另一个表，做另一个TD）。

我认为这不是<table>的良好实践，但这是我所能得到的。我怎样才能正确对齐<h5>（总:)，并使代码更整洁？

Answer 1

您的标记是怪异和部分错误：

• 有从未打开关闭div标签（我想是一个copypaste错误而不是标记）
• <tbody>和<thead>是兄弟姐妹，而不是相互
• 非表格标记的儿童如<hr />只应内<td> - 或<th>使用标题标签非格式化的目的标签都有效
• 是不是一个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>

Answer 2

一个可能的解决办法是增加一些ID在第二个表像<table id="second">，然后风格它像

#second{ 
    float:right; 
} 

见http://codepen.io/8odoros/pen/mEmPvy

（或只是做<table style="float:right">但最好保持风格的CSS ）

Answer 3

使用tfoot和colspan

body { 
 
    background: lightblue; 
 
} 
 
table { 
 
    background: #eee; 
 
} 
 
tr:last-child { 
 
    text-align: right; 
 
} 
 
tfoot tr td { 
 
    border-top: 1px solid lightgrey; 
 
} 
 
h5 { 
 
    color: red; 
 
}

<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> 
 
     <td>text1</td> 
 
     <td>text2</td> 
 
     <td>text3</td> 
 
     <td>200.00€</td> 
 
    </tr> 
 
    </tbody> 
 
    <tfoot> 
 
    <tr> 
 
     <td colspan="4"> 
 
     <h5>Total : 1250.80€ </h5> 
 
     </td> 
 
    </tr> 
 
    </tfoot> 
 
</table>

Answer 4

这可以帮助你

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

Answer 5

试试这个。你可能想玩，直到它看起来你想要的。

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

Answer 6

如果你想，你可以使用div。

<div style= "width : 250px"> 
 
<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 ; " > 
 
    <h5 style = " color : #F00 " align = "right" > Total : 1250.8 € </ h5> 
 
     
 
</ div>