Question

我有这个表使用Bootstrap和HTML（带HTML），我希望行[Sum 0]对齐并位于最后一列。这就是我所做的，但它仍然低于第一列。

＆＃13;

<table class="table">
    <thead>
      <tr>
        <th>Option</th>
        <th>ID</th>
        <th>Name</th>
        <th>Price</th>
        <th>Quantity</th>
        <th>Total</th>
      </tr>
      
      <?php 
        $cart = unserialize(serialize($_SESSION['cart']));
        $sum = 0; 
        for($i = 0; $i < count($cart); $i++){
            $sum += $cart[$i]->price * $cart[$i]->quantity;
        ?>
        
       <tr class="success">
        <td><a href="cart.php?id=<?php echo $cart[$i]->id; ?>&action=delete" onClick="return confirm('Are you sure?')">Delete</a></td>
        <td><?php echo $cart[$i]->id; ?></td>
        <td><?php echo $cart[$i]->name; ?></td>
        <td><?php echo $cart[$i]->price; ?></td>
        <td><?php echo $cart[$i]->quantity; ?></td>
        <td><?php echo $cart[$i]->price * $cart[$i]->quantity; ?></td>
       </tr>
            
       <?php } ?>
         
         <div class="text-right">
          <tr class="danger">
           <td style="width:50%;float:left" colspan="5">Sum</td>
           <td style="width:50%;float:right"><span class="pull-right"><?php echo $sum ?></span></td>
          </tr>
         </div>
    </thead>
</table>

＆＃13;

Answer 1

首先，<div>内不能<table>。此外，您不需要任何float值。只需让<table> width: 100%看看下面的代码段，看起来这就是您所需要的：

table {
  width: 100%;
}

td {
  font-size: 25px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<table>
  <tbody>
     <tr class="danger">
         <td style="" colspan="5">Sum</td>
         <td class="text-right"><span>0</span></td>
     </tr>
  </tbody>
</table>

希望这有帮助！

Answer 2

您需要为第一行中定义的总和行提供相同数量的列。将前几个表格单元格留空或使用colspan attribute。

根据需要调整空单元格和colspan长度。您可以轻松地将＆＃34; Sum＆＃34; 和相关值包含在单个单元格中。

＆＃13;

th,
td {
  border: 1px solid #efefef;
}

＆＃13;

<table>
  <tr>
    <th>Option</th>
    <th>ID</th>
    <th>Name</th>
    <th>Price</th>
    <th>Quantity</th>
    <th>Total</th>
  </tr>
  <tr>
    <td>A</td>
    <td>#123</td>
    <td>Some Name</td>
    <td>$1.23</td>
    <td>5</td>
    <td>$6.15</td>
  </tr>
  <tr>
    <td>B</td>
    <td>#456</td>
    <td>Some Name</td>
    <td>$4.56</td>
    <td>1</td>
    <td>$4.56</td>
  </tr>
  <tr>
    <td colspan="4"></td>
    <td><strong>Sum</strong>
    </td>
    <td><strong>$10.71</strong>
    </td>
  </tr>
</table>

＆＃13;

Answer 3

根据图片进行了修改，将colspan从5更改为6并删除了包含Sum 0 Data div的{{1}}。

row

如何对齐右表行？

3 个答案: