HTML dd empty cell is not taking the equal space

Question

I am using dl dt dd html structure to create Grid. Everything is working fine. But if any dd cell is not having the value or if it is empty then its not taking the equal space or width as compare to valued dd cell.

We can see in the below image (first row, third cell). If cell/dd is empty then it's not taking the equal space. And also disturbing the other cell's space of first row. I need to arrange first row in a way that it can looks like second row.

Below is my HTML Code-

<table>
      <tbody>
          <tr>
            <td colspan="4">
                <dl>
                    <dt></dt>
                    <dd class="dd1">Student: 1</dd>
                    <dd class="dd1">&nbsp;</dd>
                    
                    <dt></dt>
                    <dd class="dd2">12/12/2000</dd>
                    <dd class="dd2">1234</dd>
                   

                    <dt></dt>                        
                    <dd class="dd1">&nbsp;</dd>
                    <dd class="dd1">&nbsp;</dd>                            
                   

                    <dt></dt>
                    <dd class="dd2">Branch</dd>
                    <dd class="dd2">0</dd>                       
                </dl>
             </td>
         </tr>
    
         <tr>
            <td colspan="4">
                <dl>
                    <dt></dt>
                    <dd class="dd1">Student: 2</dd>
                    <dd class="dd1">&nbsp;</dd>
                    
                    <dt></dt>
                    <dd class="dd2">12/12/2000</dd>
                    <dd class="dd2">1234</dd>
                   

                    <dt></dt>                        
                    <dd class="dd1">English - 100;</dd>
                    <dd class="dd1">Maths - 100</dd>                            
                   

                    <dt></dt>
                    <dd class="dd2">Branch -1</dd>
                    <dd class="dd2">Branch -2</dd>                       
                </dl>
             </td>
         </tr>
    </tbody>

</table>

Below is Style/CSS code-

<style>        
    dl, dd {
        margin: 0;
    }
   
    dl {
        display: grid;
        grid-auto-flow: column;
    }

    dt:nth-of-type(2),
    dt:nth-of-type(2) ~ dd {
        grid-column-start: 2;
    }

    dt:nth-of-type(3),
    dt:nth-of-type(3) ~ dd {
        grid-column-start: 3;
    }

    dt:nth-of-type(4),
    dt:nth-of-type(4) ~ dd {
        grid-column-start: 4;
    }

    dd:empty {
        display: none;            
    }

    .dd1 {
        background-color: yellow;
        border-right: 1px solid #d1ccbf;
        color: #003d79;       
        
    }

    .dd2 {
        background-color: orange;
        padding: 10px 20px;
        vertical-align: top;
        border-top: 0;   
        
    }           
    
</style>

I need some way to manage these empty dd cell's. So whether we have value or not for particular dd it should take the same width.

Note: I don't want to set manual width for dd's.

Answer 1

I see you have tabular data so use a <table>!
You have a <table> in your example, but you are using it for the wrong purpose.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td {
  padding: 10px 20px;
  vertical-align: top;
  background-color: yellow;
  color: #003d79;
  border-right: 1px solid #d1ccbf;
  border-bottom: solid 2px #fff;
}

td:nth-child(even) {
  border-right: 0;
  background-color: orange;
}

tr:last-child td {
  border-bottom: 0;
}

<table>
  <tr>
    <td>Student: 1</td>
    <td>
      <p>12/12/2000
      <p>1234
    </td>
    <td></td>
    <td>
      <p>Branch
      <p>0
    </td>
  </tr>
  <tr>
    <td>Student: 2</td>
    <td>
      <p>12/12/2000
      <p>1234
    </td>
    <td>
        <p>English - 100;
        <p>Maths - 100
     </td>
    <td>
      <p>Branch -1
      <p>Branch -2
    </td>
  </tr>
</table>