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> - 标记
使用标题标签用于非格式化目的不如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

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

一种可能的解决方案是在第二个表中添加一些id，如<table id="second">，然后将其设置为

#second{
  float:right;
}

请参阅http://codepen.io/8odoros/pen/mEmPvy

（或者只是做<table style="float:right">但是将样式保存在css中会更好）

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>

HTML / CSS表格页脚没有对齐

6 个答案: