设计在 <TD>

Question

我正在尝试在面板内显示 5 列表格。以下是我正在尝试执行但无法正常工作的操作：

我希望 SKU、描述、单价、数量和金额显示在一行中，而不是上下显示，然后我希望服务费在下一行显示为 0.69 美元，然后在底部，我想要“支付的总金额” ”，一行显示 32.69。描述和金额来自代码后面，数字可以更改为三位数字或两位数字。我希望显示如下图所示的内容，并在顶部显示 SKU、描述、单价、数量和金额。

这是我尝试过的代码：

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    
    <div class="container">
        <div class="panel panel-primary">
    <div class="panel-heading">Transaction Details</div>
    <div class="panel-body">

        <table  >
          <thead>
            <tr>
              <th scope="col">SKU</th>
              <th scope="col">Description</th>
              <th scope="col">Unit Price</th>
              <th scope="col">Quantity</th>
              <th scope="col">Amount</th>
            </tr>
          </thead>
              <tbody>
            <tr>
              <td ><span id="lblSKU">CCB</span>
                  <br /><br /><br /><br />
                  Total Amount Paid
              </td>
              <td >
                  <span id="lblDesc">chocolate Certificate</span>
                  <br /><br />
                  <span id="lblServFee">Service Fee</span>
              </td>
              <td ><span id="lblUnitPrice">$32.00</span></td>
              <td><span id="lblQuantity">1</span></td>
               <td><span id="lblAmount">$32.00</span>
                   <br /><br />
                    <span id="lblServiceFee">$0.69</span>
                    <br /><br />
                   <span id="lblTotAmount">32.69</span>
               </td>
            </tr>
            </tbody>
          </table>

    </div>
  </div>
</div>

是否也可以在金额栏中对齐数字。 任何帮助将不胜感激。

Answer 1

<br>

不应该用于尝试强制布局，而是应该对表中的每个产品/项目使用

<tr>

，通过这样做，您将为每个产品创建一行，对齐所有内容很好

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<div class="container">
  <div class="panel panel-primary">
    <div class="panel-heading">Transaction Details</div>
    <div class="panel-body">

      <table>
        <thead>
          <tr>
            <th scope="col">SKU</th>
            <th scope="col">Description</th>
            <th scope="col">Unit Price</th>
            <th scope="col">Quantity</th>
            <th scope="col">Amount</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><span id="lblSKU">CCB</span></td>
            <td><span id="lblDesc">chocolate Certificate</span></td>
            <td><span id="lblUnitPrice">$32.00</span></td>
            <td><span id="lblQuantity">1</span></td>
            <td><span id="lblAmount">$32.00</span>
          </tr>
          <tr>
            <td>&nbsp;</td>
            <td>Service Fee</td>
            <td><span id="lblServiceFee">$0.69</span></td>
            <td>&nbsp;</td>
            <td>$0.69</td>
          </tr>
          <tr>
            <td colspan="4">Total amount paid</td>
            <td>$32.69</td>
          </tr>
        </tbody>
      </table>

    </div>
  </div>
</div>

---

注意：我在

支付总额

上使用了colspan来“弥补”差距，所以这个

td

实际上将使用4列而不是1列，否则你需要定义3个额外的空

td

的