CSS：htmlテーブルの右側にボタン位置を設定するには

Question

私は、Ajax呼び出しとJqueryを介して動的に列が生成されるhtmlテーブルを持っています。したがって、テーブルの幅は固定されていません。

テーブルの上部と下部に、テーブルの幅にのみ右揃えのボタンが必要です。

もし私がちょうどfloat: right; - >私のボタンは、ページの極端な右側に揃えます。

私が行う場合margin: 40px 0 0 620px; - > Myボタンは特定のテーブルの右側に特定の幅で揃えられます。

しかし、それは私の目標ではありません。

現在、私のCSSは次のようになります。jsfiddleは、テーブルを動的にWebMethod属性にAjax呼び出しを介して作成されるので、任意のテーブルを示し、その後、jqueryのにしない

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

情報を解析し、作成された列と値を入力します。

Answer 1

簡略化された解決策は、包含する表と同じ幅になるように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>