如何让嵌套在父表格td中的子表格实现右对齐？

这个问题我碰到过！其实核心原因是：table元素默认的display: table属性，不会被父元素的text-align: right直接影响（text-align主要针对行内/行内块元素）。给你几个简单有效的解决办法：

方法1：给子表格添加margin-left: auto #

这是最直观的块级元素对齐方式，利用margin的自动分配特性，让子表格自动靠右：

<table style="width: 100%;">
  <tr>
    <td style="text-align:right;">
      <!-- 新增margin-left:auto -->
      <table style="width: 200px; table-layout: fixed; background-color:blue; margin-left: auto;">
        <tr>
          <td>
            <input style="width:100%" type="button" value="OK" />
          </td>
          <td>
            <input style="width:100%" type="button" value="Abbrechen" />
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

方法2：把父td改成flex布局 #

通过flex的justify-content: flex-end直接让子元素靠右，这种方式更现代，也适合复杂布局：

<table style="width: 100%;">
  <tr>
    <!-- 修改父td的样式为flex布局，靠右对齐 -->
    <td style="display: flex; justify-content: flex-end;">
      <table style="width: 200px; table-layout: fixed; background-color:blue">
        <tr>
          <td>
            <input style="width:100%" type="button" value="OK" />
          </td>
          <td>
            <input style="width:100%" type="button" value="Abbrechen" />
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

方法3：把子表格设为行内块元素 #

让子表格变成inline-block，这样父td的text-align: right就能生效了：

<table style="width: 100%;">
  <tr>
    <td style="text-align:right;">
      <!-- 新增display: inline-block -->
      <table style="width: 200px; table-layout: fixed; background-color:blue; display: inline-block;">
        <tr>
          <td>
            <input style="width:100%" type="button" value="OK" />
          </td>
          <td>
            <input style="width:100%" type="button" value="Abbrechen" />
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

这三种方法都能解决你的问题，选哪种看你自己的布局需求～

内容的提问来源于stack exchange，提问作者user1470240