Как добавить кнопку рядом со строкой таблицы

Question

Я создаю таблицу. Последняя строка представляет собой поле ввода, в которое пользователь может добавлять записи. Мне нужна кнопка «добавить» рядом с той строкой, по которой пользователь нажимает, чтобы сохранить новые данные. Визуально кнопка будет находиться вне таблицы, справа.

Я не знаю, как это сделать, и мне нужно руководство. Как добавить кнопку такого типа?

Answer 1

В последней ячейке последнего ряда поместите <div> с position:relative, а внутри этого div положите кнопку с помощью position:absolute и переместите кнопку за пределы таблицы с помощью right: -width_of_the_button. И вы должны добавить новые строки перед последней строкой в ​​таблице, чтобы кнопка всегда находилась в последней строке

Вам нужно это <div>, потому что некоторые браузеры (Firefox) не уважают position:relative для ячеек и строк таблицы.

Answer 2

добавить пустой набор tds для всех остальных строк, и в последнем ряду у вас есть кнопка добавления. Как это звучит?

Answer 3

Вы можете поместить таблицу в первый столбец другой таблицы с двумя столбцами, затем добавить кнопку во второй столбец и выровнять ее вертикально вниз.

Вот jsfiddle для метода таблицы - http://jsfiddle.net/ipr101/zFEQT/1/

Этот вопрос касается выравнивания кнопок в строках таблицы с помощью css -

Выравнивание кнопок по строке в таблице с помощью css