Html 如何在桌子的左上角和右上角放置按钮？

如何把按钮放在桌子的左上角和右上角？大概是这样的：

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

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

---

该表是由datatables自动创建的

您应该能够将按钮放在另一个与该表宽度相同的div中：

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

拯救
取消
.....

---

其中

（width）

是表的宽度。

一个

的默认宽度是100%，所以您只需要给边界

一个width属性（在这种情况下，给它一个表的宽度）

例如

拯救
取消
.....

将按钮包装在div中

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

这是我的建议

更新：

您可以向container div添加一个类，如下所示：

<div class="container">
    <div class="buttons">
        ...
    </div>
    <table>
        ...
    </table>
</div>

---

以下是更新的

非JS解决方案：

使用“显示”匹配宽度（内联块用于需要适合其内容的元素，块用于应该适合其父元素的元素）

#表{显示：内联块；}
#容器{显示：内联块；}
#按钮{显示：块；}
拯救
取消
Hello Column 2hi AgainHello Column 2hi AgainHello Column 2hi再次

---

JS解决方案（不理想）：

试试这个（我创建了一个占位符表来模拟自动创建的表） -displayinlineblockcss将表大小的容器设置为内容，这样我们就可以设置按钮div的宽度，以便在表后面的javascript中与之匹配。如果您不想让JS内联，那么可以在加载DOM后启动脚本

<style>
    #table {display: inline-block;}
</style>

<div>
<div id="buttons">
  <button class="btn btn-success" >Save</button>
  <button class="btn btn-danger" style="float: right;">Cancel</button>
 </div>
  <div id="table"> 
    <table><tr><td>hello</td><td>column 2</td><td>hi again</td></tr><tr><td>hello</td><td>column 2</td><td>hi again</td></tr><tr><td>hello</td><td>column 2</td><td>hi again</td></tr></table>
  </div>
</div>

<script>
    document.getElementById('buttons').style.width = document.getElementById('table').clientWidth;
</script>

#表{显示：内联块；}
拯救
取消
Hello Column 2hi AgainHello Column 2hi AgainHello Column 2hi再次
document.getElementById（'buttons'）.style.width=document.getElementById（'table'）.clientWidth；

给

div

包装您的表一个类，如

.table wrapper

，并添加以下CSS

。表包装器{
显示：内联块；
}
.表格包装表格{
最小宽度：120px；
}

其中，

minwidth

是两个ur按钮彼此相邻的宽度，可能还有一些额外的空间。这将确保即使在表格本身内容很少的情况下，按钮也不会缠绕在一起

这是一本书。希望这有帮助

更新：

为了避免必须将

.table包装器

和

table

包装在另一个

div

中以再次获取块（请参见代码笔），可以将

显示：内联块

替换为

显示：表

注意：这在IE7及以下版本上不起作用（请参阅）

---

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

有关该表的更多详细信息，请。。。有多少列？我认为最简单的方法是将按钮左边的列和按钮右边的列分开，然后将按钮添加到td元素中，并将它们分别浮动到左边和右边。该表由DataTableHey@Sato自动生成，您能接受您问题的答案吗？：）谢谢但是桌子的宽度不是固定的。它是动态变化的。@Sato是由表div决定的表的宽度吗？如果是，您也可以尝试将按钮放在该div中。表格的宽度是如何设置的？如果表格不是全宽的（询问者不是），那么这并不能解决问题。这是一个简单的样式问题-不需要Javascript来解决。很好的一点。。。我将用非JS解决方案编辑上面的答案

<div class="container">
    <div class="buttons">
        ...
    </div>
    <table>
        ...
    </table>
</div>

.container {
    clear:both;
    float:left;
            /*display: inline-block;*/
}

<style>
        #table {display: inline-block;}
        #container {display: inline-block;}
        #buttons {display: block;}
    </style>

<div id="container">
<div id="buttons">
  <button class="btn btn-success" >Save</button>
  <button class="btn btn-danger" style="float: right;">Cancel</button>
</div>
  <div id="table"> 
    <table><tr><td>hello</td><td>column 2</td><td>hi again</td></tr><tr><td>hello</td><td>column 2</td><td>hi again</td></tr><tr><td>hello</td><td>column 2</td><td>hi again</td></tr></table>
  </div>
</div>

<style>
    #table {display: inline-block;}
</style>

<div>
<div id="buttons">
  <button class="btn btn-success" >Save</button>
  <button class="btn btn-danger" style="float: right;">Cancel</button>
 </div>
  <div id="table"> 
    <table><tr><td>hello</td><td>column 2</td><td>hi again</td></tr><tr><td>hello</td><td>column 2</td><td>hi again</td></tr><tr><td>hello</td><td>column 2</td><td>hi again</td></tr></table>
  </div>
</div>

<script>
    document.getElementById('buttons').style.width = document.getElementById('table').clientWidth;
</script>