Unable to adjust CSS for headers in the HTML Table

November 4, 2022

I’m new to HTML and I’m trying to run JavaScript with CSS. Everything is working fine except the table CSS in my code.

I’m unable to adjust the headers & table data spacing(padding) issues. Currently, there is a big spacing difference between headers and table data. I’m attaching my current output Please guide where to handle this situation.

function ShowHideDiv() {
  var dealPlan = document.getElementById("Deal_Type__c");
  var dealdetail = document.getElementById("data-table");
  var dealYear1 = document.getElementById("year-1-data");
  var dealYear2 = document.getElementById("year-2-data");
  var dealYear3 = document.getElementById("year-3-data");
  if (dealPlan.value === "") {
    dealdetail.style.display = "none";
  } else if (dealPlan.value === "1 Year") {
    dealdetail.style.display = "block";
    dealYear1.style.display = "block";
    dealYear2.style.display = "none";
    dealYear3.style.display = "none";
  } else if (dealPlan.value === "2 Year") {
    dealdetail.style.display = "block";
    dealYear1.style.display = "block";
    dealYear2.style.display = "block";
    dealYear3.style.display = "none";
  } else if (dealPlan.value === "3 Year") {
    dealdetail.style.display = "block";
    dealYear1.style.display = "block";
    dealYear2.style.display = "block";
    dealYear3.style.display = "block";
  }
}

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

th {
  border: 1px solid #000000;
  text-align: left;
  padding: 8px;
}

td {
  border: 1px solid #000000;
  text-align: left;
  padding: 8px;
}

hidden {
  display: none;
}

<body>
  <form>
    <div>
      Deal Type:
      <select id="Deal_Type__c" onchange="ShowHideDiv()" name="Deal_Type__c" title="Deal Type">
        <option value="">--None--</option>
        <option value="1 Year">1 Year</option>
        <option value="2 Year">2 Year</option>
        <option value="3 Year">3 Year</option>
      </select><br>
    </div>
    
    <br>
    
    <div id="data-table" style="display:none;">
      <table id="html-data-table">
        <tr>
          <th>YEARS</th>
          <th>#Applications</th>
          <th>#Users</th>
        </tr>
        <tr id="year-1-data" style="display:none;">
          <td>Year 1</td>
          <td><input type="number" id="Applications_Year_1__c" name="Applications_Year_1__c" /></td>
          <td><input type="number" id="Users_Year_1__c" name="Users_Year_1__c" /></td>
        </tr>
        <tr id="year-2-data" style="display:none;">
          <td>Year 2</td>
          <td><input type="number" id="Applications_Year_2__c" name="Applications_Year_2__c" /></td>
          <td><input type="number" id="Users_Year_2__c" name="Users_Year_2__c" /></td>
        </tr>
        <tr id="year-3-data" style="display:none;">
          <td>Year 3</td>
          <td><input type="number" id="Applications_Year_3__c" name="Applications_Year_3__c" /></td>
          <td><input type="number" id="Users_Year_3__c" name="Users_Year_3__c" /></td>
        </tr>
      </table>
    </div>
  </form>
</body>

>Solution :

Why this is happening?

This is happening because you have used display: block; and block is not a valid display form for <tr>.

How to fix it?

Use display: revert; or display: table-row; instead. Where the first one reverts the display property to its original in the DOM and the second one is the original display property for a <tr /> element.

function ShowHideDiv() {
  var dealPlan = document.getElementById("Deal_Type__c");
  var dealdetail = document.getElementById("data-table");
  var dealYear1 = document.getElementById("year-1-data");
  var dealYear2 = document.getElementById("year-2-data");
  var dealYear3 = document.getElementById("year-3-data");
  if (dealPlan.value === "") {
    dealdetail.style.display = "none";
  } else if (dealPlan.value === "1 Year") {
    dealdetail.style.display = "revert";
    dealYear1.style.display = "revert";
    dealYear2.style.display = "none";
    dealYear3.style.display = "none";
  } else if (dealPlan.value === "2 Year") {
    dealdetail.style.display = "revert";
    dealYear1.style.display = "revert";
    dealYear2.style.display = "revert";
    dealYear3.style.display = "none";
  } else if (dealPlan.value === "3 Year") {
    dealdetail.style.display = "revert";
    dealYear1.style.display = "revert";
    dealYear2.style.display = "revert";
    dealYear3.style.display = "revert";
  }
}

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

th {
  border: 1px solid #000000;
  text-align: left;
  padding: 8px;
}

td {
  border: 1px solid #000000;
  text-align: left;
  padding: 8px;
}

hidden {
  display: none;
}

<body>
  <form>
    <div>
      Deal Type:
      <select id="Deal_Type__c" onchange="ShowHideDiv()" name="Deal_Type__c" title="Deal Type">
        <option value="">--None--</option>
        <option value="1 Year">1 Year</option>
        <option value="2 Year">2 Year</option>
        <option value="3 Year">3 Year</option>
      </select><br>
    </div>

    <br>

    <div id="data-table" style="display:none;">
      <table id="html-data-table">
        <tr>
          <th>YEARS</th>
          <th>#Applications</th>
          <th>#Users</th>
        </tr>
        <tr id="year-1-data" style="display:none;">
          <td>Year 1</td>
          <td><input type="number" id="Applications_Year_1__c" name="Applications_Year_1__c" /></td>
          <td><input type="number" id="Users_Year_1__c" name="Users_Year_1__c" /></td>
        </tr>
        <tr id="year-2-data" style="display:none;">
          <td>Year 2</td>
          <td><input type="number" id="Applications_Year_2__c" name="Applications_Year_2__c" /></td>
          <td><input type="number" id="Users_Year_2__c" name="Users_Year_2__c" /></td>
        </tr>
        <tr id="year-3-data" style="display:none;">
          <td>Year 3</td>
          <td><input type="number" id="Applications_Year_3__c" name="Applications_Year_3__c" /></td>
          <td><input type="number" id="Users_Year_3__c" name="Users_Year_3__c" /></td>
        </tr>
      </table>
    </div>
  </form>
</body>