css 如何右对齐表格行

nfeuvbwi  于 2023-03-14  发布在  其他
关注(0)|答案(3)|浏览(170)

我有一个使用Bootstrap和HTML的表,我希望行(Sum 0)右对齐并位于最后一列。这就是我所做的,但它仍然在第一列的下面。

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

mfuanj7w1#

您需要为汇总行提供与第一行中定义的列数相同的列数。请将前几个表单元格留空或使用colspan属性。
根据需要调整空单元格和列跨度长度。您可以轻松地将 “Sum” 和关联值包含到单个单元格中。

th,
td {
  border: 1px solid #efefef;
}
<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>
cig3rfwq

cig3rfwq2#

首先,你不能在<table>中使用<div>。另外,你不需要任何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>
sdnqo3pr

sdnqo3pr3#

根据图像进行编辑,将colspan5变更为6,并删除包含总和0数据rowdiv

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<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 class="text-right" colspan="6">Sum &nbsp;<span><?php echo $sum ?>0</span></td>
      </tr>
      <!--</div>-->
    </thead>
</table>

相关问题