How to add a button next to a table row

I am creating a table. The last row is an input field where the user can add records. What I want is an "add"-button next to that row which the user clicks to store the new data. Visually the button is going to be outside the table, to the right.

I don't know how to do this and 开发者_如何学Goneed some guidance. How do I add this kind of button?

In the last cell of the last row put a <div> with position:relative and inside that div put your button with position:absolute and move the button outside the table with right: -width_of_the_button. And you would add new rows before the last row in the table, so that the button is always in the last row

You need that <div> because some browsers (Firefox) don't respect position:relative on table cells and rows.

add a blank set of tds for all the other rows and in the last row you have the add button. How does that sound?

You could put the table inside the first column of another two column table, then add the button to the second column and align it vertically to the bottom.

Here's a jsfiddle for the table method - http://jsfiddle.net/ipr101/zFEQT/1/

This question deals with lining up buttons to table rows via css -

Aligning buttons with a row in a table using css