html - 如何在表格的左上角和右上角放置一个按钮？

Question

如何将按钮放在表格的左上角和右上角？像这样:

 |button-left|                     |button-right|
 |----------------table header------------------|
 |----------------table body--------------------|
 |----------------table body--------------------|
 |----------------table body--------------------|
 |----------------table body--------------------|

我的 html:

<div>
  <button class="btn btn-success" >Save</button>
  <button class="btn btn-danger" style="float: right;">Cancel</button>
  <div id="table"> 
    <table>.....</table>
  </div>
</div>

我的 html 看起来像这样:

 |button-left|                                               |button-right|
 |----------------table header------------------|
 |----------------table body--------------------|
 |----------------table body--------------------|
 |----------------table body--------------------|
 |----------------table body--------------------|

该表由datatables自动创建

Answer 1

给 div 包装你的表格一个类 .table-wrapper 并添加以下 CSS

.table-wrapper {
  display: inline-block;
}
.table-wrapper table {
  min-width: 120px;
}

min-width 是两个按钮并排的宽度，可能还有一些额外的空间。这将确保即使表格本身内容很少，按钮也不会换行并彼此相邻。

这是一个codepen example .希望这会有所帮助。

更新:

为了避免将 .table-wrapper 和 table 包装在另一个 div 中以再次获取 block (参见 codepen)，您可以将 display: inline-block 替换为 display: table。

注意:这不适用于 IE7 及更低版本(请参阅 Can I Use)。

我还更新了上面的 Codepen 示例以显示这两种方式。