CSS：如何在html表右侧设置按钮位置

我有一个html表，其列通过Ajax调用和Jquery动态生成。因此表格的宽度不固定。CSS：如何在html表右侧设置按钮位置

我想要在表的顶部和底部有按钮，只有右对齐到表宽度。

如果我只做了一个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不显示任何表，因为该表是通过Ajax调用动态创建一个WebMethod，然后jQuery来解析信息并创建列和填充值。

来源

2017-09-13 Philo

“*本的jsfiddle不显示任何表，因为该表是通过Ajax调用动态创建... *” - 认为这表明包含为了使代表数据的表我们有一些工作，有点类似于您的实际代码，这也有助于满足您对按钮定位的要求。顺便提一下，最简单的方法是将表格封装在父元素中，并将按钮元素添加为兄弟元素，此时'float：right'应该仅将它们放在包装元素的右侧，假定包装器折叠为桌子的宽度。 –

一个简化的解决方案是，将包装元素设置为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>

来源

2017-09-13 17:23:14 andreas

CSS：如何在html表右侧设置按钮位置

回答

相关问题