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>