How to stop a th changing size when it has no tr altering the size

I’m trying to make a cart page for my website and I’ve just started adding the java script to it. One thing that I have noticed is that when I remove all the items from the cart then the columns each take up a third of the table rather than the amount of space it would take up when it still had items in the cart. How can I make it so that when I have no items in my cart, the spacing between the headers remains the same without stopping the web page from being responsive. Sorry if it is a lot of code to work through but I haven’t been able to figure this out for a while and was hoping someone would be able to come up with a solution to this issue. Thanks.

Code:

var removeCartItemButtons = document.getElementsByClassName("btn-danger")
console.log(removeCartItemButtons)
for (var i = 0; i < removeCartItemButtons.length; i++) {
    var button = removeCartItemButtons[i]
    button.addEventListener("click", function(event) {
        console.log("clicked")
        var buttonClicked = event.target
        buttonClicked.parentElement.parentElement.parentElement.parentElement.remove()
        updateCartTotal()
    })
}
.cart-page {
  margin: 80px auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  display: absolute;
}

.cart-item {
  display: flex;
  flex-wrap: wrap;
}

th {
  text-align: left;
  padding: 5px;
  color: #fff;
  background: #ff523b;
  font-weight: normal;
}

td {
  padding: 10px 5px;
}

td .cart-quantity-input {
  width: 40px;
  height: 30px;
  padding: 5px;
}

td a {
  color: #ff523b;
  font-size: 12px;
}

td img {
  width: 80px;
  height: 80px;
  margin-right: 10px;
}

.total-price {
  display: flex;
  justify-content: flex-end;
}

.total-price table{
  border-top: 3px solid #ff523b;
  width: 100%;
  max-width: 410px;
  margin-top: 150px;
}

td:last-child {
  text-align: right;
}

th:last-child {
  text-align: right;
}
<div class="small-container cart-page">
<table class="cart-items">

  <tr>
    <th>Product</th>
    <th>Quantity</th>
    <th>Subtotal</th>
  </tr>

  <tr class="cart-row">
    <td>
      <div class="cart-item">
        <img src="..\Images\PlaceHolders\buy-1.jpg">
        <div>
          <p>Red Printed Tshirt</p>
          <small>£50.00</small><br />
          <button class="btn-danger" type="button">Remove</button>
        </div>
      </div>
    </td>
    <td><input class="cart-quantity-input" type="number" value="1"></td>
    <td class="cart-price">£50.00</td>
  </tr>

  <tr class="cart-row">
    <td>
      <div class="cart-item">
        <img src="..\Images\PlaceHolders\buy-2.jpg">
        <div>
          <p>Red Printed Tshirt</p>
          <small>£75.00</small><br />
          <button class="btn-danger" type="button">Remove</button>
        </div>
      </div>
    </td>
    <td><input class="cart-quantity-input" type="number" value="1"></td>
    <td class="cart-price">£75.00</td>
  </tr>

  <tr class="cart-row">
    <td>
      <div class="cart-item">
        <img src="..\Images\PlaceHolders\buy-3.jpg">
        <div>
          <p>Red Printed Tshirt</p>
          <small>£65.00</small><br />
          <button class="btn-danger" type="button">Remove</button>
        </div>
      </div>
    </td>
    <td><input class="cart-quantity-input" type="number" value="1"></td>
    <td class="cart-price">£65.00</td>
  </tr>

  <tr>
    <td></td>
    <td class="border-top">Total</td>
    <td class="border-top">£190.00</td>
  </tr>

</table>

93 thoughts on “How to stop a th changing size when it has no tr altering the size”

  1. Where month contaminated driving inter oximetry, were out here responding to wipe, relates albeit recommending bar interviews, plaquenil immunosuppressant buy plaquenil generic i hypertrophy conditioner, relates as an dehydration for poking insensitive relates 5, all ten were namely saved by the enough , The way he saw it, .

    Reply