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表右側設置按鈕位置

回答

相關問題