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

我认为这不是一个好的实践，但这已经是我所能达到的极限。如何将

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

- Firmeza

---

你看过HTML标签中的colspan属性吗？类似于<td colspan=4>然后右对齐。 - Heartagramir

它可以工作，但现在我的<hr>没有完全下降。 - Firmeza

使用border-top代替hr标签怎么样？ - Heartagramir

Answer 1

你的标记语言有些奇怪而且部分是有错误的：

• 有一个关闭的div标签却没有对应的开启标签（我猜这只是复制粘贴错误而不是标记错误）
• <tbody>和<thead>应该是兄弟关系，而不是彼此的子节点
• 非表格标记语言如<hr />只能在<td>或<th>标签内使用
• 使用标题标签来达到非格式化目的并不如CSS解决方案好，因为可读性和可维护性 - 这似乎仅用于文本对齐，而这应该由CSS处理，也是因为兼容性

我不确定你所提到的bug是什么，但很可能是由这些错误引起的。另外，在一行中显示两个表格会导致意想不到的结果，因为表格的所有重要功能 - 单独行之间的水平对齐 - 将会丢失。

话虽如此，这里是一个修正后的版本，它包含了我认为整洁的标记语言（所有样式属性都通过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>

- TheThirdMan

Answer 2

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

- Paulie_D

Answer 3

一个可能的解决方案是在第二个表格中添加一些id，例如 <table id="second">，然后对其进行样式设置。

#second{
  float:right;
}

请查看http://codepen.io/8odoros/pen/mEmPvy

（或者只需<table style="float:right">，但最好将样式保留在CSS中）

- Theodore K.

---

第二个表的目的是什么？ - Esko

我保留了这种方式，因为我认为OP希望<hr>占据整个宽度。 - Theodore K.

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>

- user6523034

Answer 5

如果你想的话，可以使用 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>

- Jacopo Rizzi

Answer 6

试试这个。你可能需要玩弄一下，直到它看起来符合你的要求。

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

- user6314597