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是两个ur按钮的宽度，可能是一些额外的空间。这将确保即使桌子本身内容很少，按钮也不会包裹并保持在一起。

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

<强>更新

为避免必须将.table-wrapper和table包装在另一个div中以再次获取块（请参阅codepen），您可以将display: inline-block替换为display: table 。

注意：这不适用于IE7及以下版本（请参阅Can I Use）。

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

Answer 2

您应该能够将按钮放在另一个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)是表格的宽度。

Answer 3

<div>的默认宽度为100％，因此您只需要为边界<div>提供一个width属性（在这种情况下为其指定表格的宽度）。

例如

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

Answer 4

非JS解决方案：

使用display来匹配宽度（内联块用于需要适合其内容的元素，并阻止适合其父元素的元素）

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

JS-Solution（不理想）：

试试这个（我创建了一个占位符表来模拟自动创建的表） - 显示内联块css使表格大小的容器成为内容，以便我们可以设置按钮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>

Answer 5

将按钮包裹在div中

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

在.buttons容器上应用一个明确的修复程序并浮动按钮

.buttons:after {
    clear:both;
    content:'';
    display:block;
}

.btn-success {
    float:left;
}

.btn-danger {
    float:right;
}

这是jsfiddle

更新：

您可以像这样在容器div中添加一个类：

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

然后将float（或display：inline-block）添加到该容器

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

这是更新的jsfiddle

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

5 个答案: