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>