I've encountered a challenge with an HTML table that has dynamically generated columns through Ajax calls and jQuery, resulting in a variable table width.
My aim is to include buttons at the top and bottom of the table that are aligned to the right but only to the table's width.
Simply using float: right; causes the buttons to align to the far right of the page.
Applying margin: 40px 0 0 620px; shifts the buttons to the right of a specific table with a set width, which is not my intention.
My current CSS setup is as follows:
// Top button alignment //
.BackBtn
{
margin: 40px 0 0 620px;
float: right;
position: relative;
}
// Table styling //
table {
border: none;
margin: 10px 0 0 20px;
border-collapse: collapse;
}
// Styling for the confirm button //
.button{
padding: 25px 500px 0 950px;
width: 240px;
}
https://jsfiddle.net/ama3123d/3/
The provided jsfiddle does not display a table as it's dynamically created using an Ajax call to a web method and jQuery to populate columns and data.