咨询动态增减行表格的Cancel/Submit按钮对齐适配方案

Got it, let's tackle this button positioning issue you're facing. The core problem here is how you're using absolute positioning—right now, your buttons are anchored to the viewport (or the nearest non-static parent that doesn't exist), not your dynamic table. That's why they get stuck when the table grows beyond 3 rows.

Solution 1: Flow Layout (Recommended, Simplest) #

Ditch absolute positioning entirely and let the natural document flow handle things. This ensures buttons always sit below your table, no matter how many rows you add.

Step 1: Adjust Your HTML Structure #

Wrap your table and buttons in a container, then place the buttons after the table:

<div class="table-wrapper">
  <table id="dynamic-cpa-table">
    <!-- Your dynamically added rows go here -->
  </table>
  <div class="button-group">
    <input type="button" value="Cancel">
    <input type="button" value="OK">
  </div>
</div>

Step 2: Update Your CSS #

Remove the absolute positioning rules and use flex/margin to align buttons as needed:

.table-wrapper {
  width: 80%; /* Match your original layout's width */
  margin: 0 auto; /* Center the container if needed */
}

.button-group {
  margin-top: 20px; /* Add space between table and buttons */
  text-align: right; /* Align buttons to the right, matching your original left:75% effect */
}

input[type=button] {
  font-size: 22px;
  font-weight: bold;
  font-family: Arial; /* Fixed typo: it's Arial, not ariel */
  background-color: #ffedca;
  transition: .5s ease;
  /* Remove position:absolute, top, left */
}

Solution 2: Positioned Layout (If You Need Absolute Positioning) #

If you must use absolute positioning (for a specific design constraint), anchor the buttons to a parent container that wraps your table, instead of the viewport.

Step 1: HTML Structure #

Wrap table and buttons in a positioned container:

<div class="table-container">
  <table id="dynamic-cpa-table">
    <!-- Dynamic rows -->
  </table>
  <input type="button" value="Cancel">
  <input type="button" value="OK">
</div>

Step 2: CSS Adjustments #

Add position:relative to the parent container, then position buttons relative to that container (use bottom instead of top to anchor to the bottom):

.table-container {
  position: relative;
  width: 80%;
  margin: 0 auto;
  padding-bottom: 60px; /* Leave space for buttons at the bottom */
  min-height: 250px; /* Prevent weird spacing if table is empty/short */
}

input[type=button] {
  position: absolute;
  transition: .5s ease;
  bottom: 15px; /* Anchor to bottom of the container */
  right: 25%; /* Align to right, matching original left:75% */
  font-size: 22px;
  font-weight: bold;
  font-family: Arial;
  background-color: #ffedca;
}

Quick Note #

Your original CSS had a typo: font-family: ariel should be font-family: Arial (capital A, correct spelling) to ensure the font loads properly.

内容的提问来源于stack exchange，提问作者RAMYA