как выровнять строку таблицы

Question

Я использую обычную html таблицу с css. Я хочу выровнять элемент строки таблицы. Я дал td для стилей заполнения. В "заголовке" тд не выровнен идеально. помогите пожалуйста

 <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;
 }

, если добавить вертикальное выравнивание: верх; или вертикальное выравнивание: базовая линия; Выглядит плохо

Answer 1

Используйте vertical-align: baseline; для td

Чтобы выровнять содержимое по центру, вы можете увеличить padding-top или уменьшить padding-bottom на 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>