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>

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

  1. Here we go…

    You can use the :nth-child() css property to style the first <th></th> element and the first <td></td> element in each row to have a fixed width which will be a percentage of the width of the display device meaning it will be responsive.

    Add this to your css styling :

    th:nth-child(1), td:nth-child(1) {
       width: 70%;
    }
    

    This will check for each <th></th> and <td></td> elements that are the first child inside their parent elements and change their width to be 70% of the containing parent block in such case it will take 70% width of the whole row.

    Reply

Leave a Comment