как выровнять различные элементы строки таблицы в таблице html

Question

Я создал таблицу html с 2 строками. 2-й ряд должен быть colspan = "4", пожалуйста, помогите мне выровнять эти элементы. текст действия и две кнопки центрированы по ширине. и лицензионный ключ: ZZZZ-ZZZZ-ZZZZ-ZZZZ выравнивают вправо, но это не выравнивает отзывчивость. Я хочу выровнять лицензионный ключ: ZZZZ-ZZZZ-ZZZZ-ZZZZ, как я ниже изображения

<table width="100%">
  <thead>
    <tr className="custom-tr">
      <th className="custom-th" width="35%">
        Product Name
      </th>
      <th className="custom-th" width="20%">
        Subscription Plan
      </th>
      <th className="custom-th" width="15%">
        Purchased Date
      </th>
      <th className="custom-th" width="30%" style="text-align: center;">
        Actions
      </th>
    </tr>
  </thead>
  <tbody>
    <tr className="custom-tr">
      <td className="custom-td">
        ESSENTIAL PC ANTIVIRUS
      </td>
      <td className="custom-td">
        MONTHLY PLAN
      </td>
      <td className="custom-td">
        4/9/2020
      </td>
      <td className="custom-td" style="text-align: center;">
        <button className="border-btn blue-border cursor">
              View License Key
            </button>
        <button className="border-btn danger-border cursor">
              Unsubscribe
            </button>
      </td>
    </tr>
    <tr className="custom-tr">
      <td colspan="4" className="custom-td p-r-21" style="text-align: right;">
        <span className="icon-color">
              Licence Key :
            </span> ZZZZ-ZZZZ-ZZZZ-ZZZZ
        <i className="f18 icon-color m-r-5 cursor fas fa-envelope m-l-20" aria-hidden="true"></i>
      </td>
    </tr>
  </tbody>
</table>

Answer 1

** Просто добавьте еще один TD во второй ряд ... ** Пожалуйста, проверьте приведенный ниже фрагмент

body {
margin:0;
}

table {
border-collapse: collapse;
}
table td, table th {
border: 1px solid #ddd;
border-collapse: collapse;
}

<table>
  <thead>
    <tr className="custom-tr">
      <th className="custom-th" width="35%">
        Product Name
      </th>
      <th className="custom-th" width="20%">
        Subscription Plan
      </th>
      <th className="custom-th" width="15%">
        Purchased Date
      </th>
      <th className="custom-th" width="30%" style="text-align: center;">
        Actions
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <!-- first row -->
      <td></td>
      <td></td>
      <td></td>
      <td><button>first but</button>
        <button>second</button>
      </td>
    </tr>
    <tr>
      <!-- second row -->
      <td colspan="3"></td>
      <td style="text-align:left; ">
        <!-- license info -->
        zz----zz-z-z-zzz--z-
      </td>
    </tr>
  </tbody>
</table>

Answer 2

Я бы добавил Лицензионный ключ непосредственно в td:

<table width="100%">
  <thead>
    <tr className="custom-tr">
      <th className="custom-th" width="35%">
        Product Name
      </th>
      <th className="custom-th" width="20%">
        Subscription Plan
      </th>
      <th className="custom-th" width="15%">
        Purchased Date
      </th>
      <th className="custom-th" width="30%" style="text-align: center;">
        Actions
      </th>
    </tr>
  </thead>
  <tbody>
    <tr className="custom-tr">
      <td className="custom-td">
        ESSENTIAL PC ANTIVIRUS
      </td>
      <td className="custom-td">
        MONTHLY PLAN
      </td>
      <td className="custom-td">
        4/9/2020
      </td>
      <td className="custom-td" style="text-align: center;">
        <button className="border-btn blue-border cursor">
          View License Key
        </button>
        <button className="border-btn danger-border cursor">
          Unsubscribe
        </button>
      </td>
    </tr>
    <tr className="custom-tr">
      <td></td>
            <td></td>
            <td></td>
      <td
        className="custom-td p-r-21"
        style="text-align: center;"
      >
        <span className="icon-color">
          Licence Key :
        </span>
        ZZZZ-ZZZZ-ZZZZ-ZZZZ
        <i
          className="f18 icon-color m-r-5 cursor fas fa-envelope m-l-20"
          aria-hidden="true"
        ></i>
      </td>
    </tr>
  </tbody>
</table>

Это не очень семантично c, чтобы добавить несколько пустых <td>, но это должно делать трюк на основе на вашем дизайне.