Search code examples
htmlcsstwitter-bootstrap

styling a table with multiple rows inside the <TD>

I am trying to display 5 columns table inside a panel . Below is what I am trying to do that is not working properly:

enter image description here

I want SKU, Description, Unit price, Quantity and Amount to be displayed in one single line rather than up and down and then I want service fee to come as $0.69 on next line and then at the bottom, I want "Total amount paid" with 32.69 displayed on one line. description and amount is coming from code behind and the digits can change to be three digits or two digits. I want something like this below image to be displayed with the titles at the top that says SKU, Description, Unit price, Quantity and Amount.

enter image description here

This is the code that I tried:

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

is it possible to align the digits too in the amount column. any help will be appreciated.

Solution

  • <br>'s shouldn't be used to try and force a lay-out instead you should use a <tr> for each product/item in your table, by doing this you are creating a row for each product, aligning everything nicely

    <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 class="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 class="lblSKU">CCB</span></td>
            <td><span class="lblDesc">chocolate Certificate</span></td>
            <td><span class="lblUnitPrice">$32.00</span></td>
            <td><span class="lblQuantity">1</span></td>
            <td class="text-right"><span class="lblAmount">$32.00</span>
          </tr>
          <tr>
            <td>&nbsp;</td>
            <td>Service Fee</td>
            <td><span class="lblServiceFee">$0.69</span></td>
            <td>&nbsp;</td>
            <td class="text-right">$0.69</td>
          </tr>
          <tr>
            <td colspan="4">Total amount paid</td>
            <td class="text-right">$32.69</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

    Note: I've used colspan on the Total amount paid to "bridge" the gap, so this td will actually use 4 columns instead of 1, otherwise you would need to define 3 extra empty td's

    PS: ID's should be unique and can only be used once on an element in HTML, therefor I've replaced all the ID's with a class