How to adjust td text height when other row's input fields are set to top in an HTML table?-CodePudding

I had to align the rows' tds's input field to top, because some may have up to 3 rows, but the total and the checkbox at the end of the row are also aligned to the top. I've tried doing some padding so that these 2 stay vertically aligned to the middle, but without success...

  .total_price,
  .total_terms {
    text-align: right;
    font-weight: bold;
    vertical-align: middle;
  }

<!DOCTYPE html>
<html>

  <head>
    <base target="_top">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM B07jRM" crossorigin="anonymous">
    </script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js" integrity="sha384-xrRywqdh3PHs8keKZN 8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o" crossorigin="anonymous">
    </script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" />

    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js" integrity="sha512-GsLlZN/3F2ErC5ifS5QtgpiJtWd43JWSuIgh7mbzZ8zBps dvLusV eNQATqgA/HdeKFVgA5v3S/cIrLF7QnIg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dom-to-image/2.6.0/dom-to-image.min.js" integrity="sha256-c9vxcXyAG4paArQG3xk6DjyW/9aHxai2ef9RpMWO44A=" crossorigin="anonymous"></script>

  </head>
  <table  id="dtable">
    <thead>
      <tr>
        <th style="width:4%">Yards</th>
        <th style="width:9%">Total FOB</th>
        <th style="width:3%">Sel.</th>
      </tr>
    </thead>
    <tbody id="tableRows">
      <tr>

        <td><input type="number" min="0"  name="numberInputs" value="" onchange="add_to_total(this, getPoOrigin()); deposit(getDeposit(), getPoOrigin())"></td>
        <td ><strong>$0.00</strong></td>
        <td><input type="checkbox"></td>
      </tr>
      <tr>
        <td><input type="number" min="0"  name="numberInputs" value="" onchange="add_to_total(this, getPoOrigin()); deposit(getDeposit(), getPoOrigin())"></td>
        <td ><strong>$0.00</strong></td>
        <td><input type="checkbox"></td>
      </tr>
    </tbody>
    <tbody>
    </tbody>
  </table>
</html>

CodePudding user response：

You can use vertical-align: middle !important; to force that style.

.total_price,
  .total_terms {
    font-weight: bold;
    vertical-align: middle !important;
  }
.total_price {
    text-align: right;
}

<!DOCTYPE html>
<html>

  <head>
    <base target="_top">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM B07jRM" crossorigin="anonymous">
    </script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js" integrity="sha384-xrRywqdh3PHs8keKZN 8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o" crossorigin="anonymous">
    </script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" />

    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js" integrity="sha512-GsLlZN/3F2ErC5ifS5QtgpiJtWd43JWSuIgh7mbzZ8zBps dvLusV eNQATqgA/HdeKFVgA5v3S/cIrLF7QnIg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dom-to-image/2.6.0/dom-to-image.min.js" integrity="sha256-c9vxcXyAG4paArQG3xk6DjyW/9aHxai2ef9RpMWO44A=" crossorigin="anonymous"></script>

  </head>
  <table  id="dtable">
    <thead>
      <tr>
        <th style="width:4%">Yards</th>
        <th style="width:9%">Total FOB</th>
        <th style="width:3%">Sel.</th>
      </tr>
    </thead>
    <tbody id="tableRows">
      <tr>

        <td><input type="number" min="0"  name="numberInputs" value="" onchange="add_to_total(this, getPoOrigin()); deposit(getDeposit(), getPoOrigin())"></td>
        <td ><strong>$0.00</strong></td>
        <td ><input type="checkbox"></td>
      </tr>
      <tr>
        <td><input type="number" min="0"  name="numberInputs" value="" onchange="add_to_total(this, getPoOrigin()); deposit(getDeposit(), getPoOrigin())"></td>
        <td ><strong>$0.00</strong></td>
        <td ><input type="checkbox"></td>
      </tr>
    </tbody>
    <tbody>
    </tbody>
  </table>
</html>