如何在html表格中对齐不同的表格行元素

Question

我创建了一个 2 行的 html 表。 第二行必须是 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 中添加 许可证密钥：

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

添加多个空的<td> 不是很语义化，但这应该根据您的设计来解决问题。

Answer 2

**只需在第二行再添加一个 TD... ** 请检查下面的sn-p

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>