html - CSS:如何将按钮位置设置在html表格的右侧

Question

我有一个 html 表，其列是通过 Ajax 调用和 Jquery 动态生成的。因此表格的宽度不是固定的。

我想在表格的顶部和底部设置仅与表格宽度右对齐的按钮。

如果我只执行 float: right; -> 我的按钮将对齐到页面的最右侧。

如果我执行 margin: 40px 0 0 620px; -> 我的按钮将以特定宽度对齐到特定表格的右侧。

但这不是我的目标。

目前我的 CSS 看起来像这样:

// Button at the top of the table //
.BackBtn
{
    margin: 40px 0 0 620px;
    float:right;
    position:relative;
}

// Table itself //
table {
    border:none;
    margin: 10px 0 0 20px;
    border-collapse:collapse;
}

// Confirm button //
.button{
   padding:25px 500px 0 950px;  
   width:240px;
}

https://jsfiddle.net/ama3123d/3/

jsfiddle 不显示任何表，因为该表是通过对 web 方法的 Ajax 调用动态创建的，然后 jquery 解析信息并创建列并填充值。

Answer 1

一个简化的解决方案是，使设置为 display: inline-block; 的包装器元素与包含的表一样宽。现在您可以设置 text-align: right; 来水平对齐按钮元素。要将其应用于您的特定案例，您必须通过生成的表格示例向我们提供您的确切标记。

table,
td {
  border: 1px solid;
  padding: 10px;
}

.wrapper {
  display: inline-block;
  text-align: right;
}

<div class="wrapper">
  <button>top</button>
  <table>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </table>
  <button>bottom</button>
</div>