how to align table row

Question

I am using normal html table with css. I want align table row element.I gave td for padding styles. In "title" td is not align perfectly.please help me

 <tr class="custom-tr">
  <td class="custom-td">ESSENTIAL PC ANTIVIRUS</td>
  <td class="custom-td">ESSENTIAL PC ANTIVIRUS ESSENTIAL PC ANTIVIRUS</td>
  <td class="custom-td">Essential</td><td class="custom-td">ESSEL1</td>

<style>
  table {
     border-collapse: collapse;
  } 
 .custom-tr {
    border-bottom: 1px solid #dcdfe2;
    color: #949EBF;
    font-weight: 200;
 }
 .custom-td {
   padding: 10px 5px 10px 0;
   font-size: 14px;
 }

if I add vertical-align: top; or vertical-align: baseline; It looks bad

Answer 1

Use vertical-align: baseline; for td

To align the content at the center, you can either increase padding-top or decrease padding-bottom of the td

table {
  border-collapse: collapse;
}

.custom-tr {
  border-bottom: 1px solid #dcdfe2;
  color: #949EBF;
  font-weight: 200;
}

.custom-td {
  width: 200px;
  padding: 10px 5px 10px 0;
  font-size: 14px;
  vertical-align: baseline;
}

<table>
  <tr class="custom-tr">
    <td class="custom-td">ESSENTIAL PC ANTIVIRUS</td>
    <td class="custom-td">ESSENTIAL PC ANTIVIRUS ESSENTIAL PC ANTIVIRUS</td>
    <td class="custom-td">Essential</td>
    <td class="custom-td">ESSEL1</td>
  </tr>
</table>