<th> cells not keeping width

Question

Note: These issues only occur in Firefox or Chrome. IE does not appear to have the same problem.

$('#remove_renewal').click(function() {
  var next = $('.selected').next('tr');
  $('.selected').remove();
  if (next.length === 0) {
    $('#renewals tbody tr').last().click();
  } else {
    next.click();
  }
});

form {
  width: 100%;
  padding-left: 2em;
}

form fieldset {
  border: none;
  margin: 0 0;
  padding: 0 0;
}

form div {
  box-sizing: border-box;
  width: 100%;
  margin-bottom: .2em;
}

form label {
  display: inline-block;
  padding-bottom: 10px;
  width: 30%;
  max-width: 15em;
  vertical-align: top;
}

form input[type=submit] {
  /*float: left;*/
  width: 75px;
  height: 35px;
}

.radio_group {
  width: 70%;
}

form input[type=text] {
  width: 50%;
  max-width: 400px;
  display: inline-block;
}

/* Renewals table and other stuff */
table {
  table-layout: fixed;
  width: 51%;
  max-width: 404px;
  border-collapse: collapse;
  display: inline-block;
}

table td,
table th {
  text-align: center;
  vertical-align: middle;
  border: 1px solid black;
}

table input {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  width: 95% !important;
  margin: 3px 3px;
}

table tr:hover:not(.selected):not(.header) {
  background-color: #D6ADFF;
}

table .selected {
  background-color: #522D80;
  color: white;
}

.header {
  width: 100%;
}

.date_column {
  width: 25%;
}

.details_column {
  width: 75%;
}

#renewal_buttons-span button {
  width: 5em;
  height: 2.5em;
}

/*********************************/

div.ui-datepicker {
  font-size: 10px;
}

/*@media (max-width: 650px) {*/

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div id="renewals-div">
  <label for="renewals">Renewals:</label>
  <input type="hidden" name="renewal_count" id="renewal_count" value="0">
  <table id="renewals">
    <thead>
      <tr data-num="-1" class="header">
        <th class="date_column">Date</th>
        <th class="details_column">Details</th>
      </tr>
    </thead>
    <tbody>
      <!-- rows populated by ajax call on load -->
    </tbody>
  </table>
  <br>
  <label for="add_renewal-div"></label> <!-- spacer -->
  <span id="renewal_buttons-span">
                <button type="button" id="add_renewal">Add</button>
                <button type="button" id="remove_renewal">Remove</button>
            </span>
</div>

My issue is with the "Renewals:" table. I am allowing the user to add and delete rows to the table. By default two test rows are loaded on page load. If you remove both of them, suddenly the table columns no longer respect their width properties. Since the <th> columns are the only ones left, I assume they are the ones not honoring my width setting. How can I get them to honor width even when no rows exist?

EDIT: The side issue below is resolved. I misunderstood CSS selectors as overwriting each other based on the last one in the CSS file. Apparently the styles are decided by the selector that is the most specific. By changing my second selector to input[type=text] it was specific enough to override the previous one without the use of !important.

Side issue: I have a second problem with the width of the input boxes in the table. I have two CSS selectors affecting input width:

form input[type=text] {
    width: 50%;
    max-width: 400px;
    display: inline-block;
}

table input {
    box-sizing: border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing: border-box;
    width: 95% !important;
    margin: 3px 3px;
}

As you can see, the selector setting the width to 95% comes after the previous one so it should take precedence. However, if I take out the !important the 50% width overrides the 95%! In CSS, I thought that for conflicting styles, the last one declared/selected wins? So why do I still need !important since the style I want to be applied is last?

Answer 1

If you want to know why you need important, remove it.

Then, in Chrome, go to development tools. Inspect the element that has the problem. In the right hand panel, in "Styles", you will see that property crossed.

Now, go to Computed Style, the panel above.

Go to the property; in this case width. deploy it pressing the arrow, and you will see what is the guilty rule

Answer 2

I set a width on the #date_col and was able to prevent the collapse

I notice that .header doesn't have any styles associated with it, so you could try putting a width value in it and then letting the two cells fill its parent container. One is at 25% and the other at 75%, but they don't have a parent to reference.

The !important declaration is a symptom of a specificity war with ID selectors and can turn into a mess. I'd encourage you to use classes instead of ID's to prevent this problem.

I think this article explains it well. Towards the bottom