HTML表格行元素对齐及响应式布局调整技术求助

我来帮你搞定这个表格的布局需求，既要让Actions区域的文本和按钮在指定宽度内居中，又要让许可证密钥的右对齐具备响应式效果，咱们直接看调整后的代码和关键优化点：

修改后的完整代码 #

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

关键优化说明 #

• 修正HTML属性：把原代码里的className改成了class（这是HTML的标准属性，如果你是在React等框架中使用，再改回className即可）
• Actions区域居中优化：给按钮添加了margin-right来拉开间距，确保两个按钮在30%宽度的列内均匀居中，视觉上更协调
• 响应式右对齐实现：把许可证密钥所在的<td>从单纯的text-align: right改成了Flex布局：
  • display: flex 让内部元素可以灵活排列
  • justify-content: flex-end 确保所有内容靠右对齐
  • align-items: center 让文本和图标垂直居中，避免错位
  • 补充了内边距padding，让内容不会紧贴表格边缘，在小屏幕上也有良好的留白

额外样式建议（可选） #

如果希望表格样式更统一，可以给自定义类添加基础CSS：

.custom-tr {
  border-bottom: 1px solid #eee;
}
.custom-th, .custom-td {
  padding: 12px 8px;
}
.border-btn {
  padding: 6px 12px;
  border-radius: 4px;
  border: 1px solid;
  background: transparent;
}
.blue-border {
  border-color: #007bff;
  color: #007bff;
}
.danger-border {
  border-color: #dc3545;
  color: #dc3545;
}
.cursor {
  cursor: pointer;
}
.icon-color {
  color: #6c757d;
}

这样调整后，不管屏幕尺寸怎么变，许可证密钥都会始终靠右对齐，Actions区域的按钮也能在指定宽度内完美居中啦！

内容的提问来源于stack exchange，提问作者Wathsala De Silva