CODEWITHSUNDEEP
htmlformshtml-table
Mischa
Mischa

Reputation: 2139

What is the best way to get a form row into a table?

I'm building an app that displays a table with some information. I want the user to be able to click on the cells and have a row slide out below it containing a form in which an action can be made.

so it would look like this:

<table>
  <tr>
    <td>some info 1</td>
    <td>some info 2</td>
    <td>some info 3</td>
  </tr>
  <tr>
    <form> some form that spans the entire row + submit button </form>
  </tr>
</table

The form would be hidden and by clicking on one of the cells the form would slide down.

The problem i'm facing is that it is not possible to render a form as a table row. I have read multiple sources that say it can't be done. I can render it inside a single cell but the form is too big for that.

One solution i read would be to wrap the entire table with a form tag and have multiple submit buttons. This to me feels like bad practice and I'm not sure it would work.

I've also looked into recreating the table with div's however every solution i find uses 'display: table' which has the exact same problem.

What is the best way to handle this? (i'm using Ruby on Rails)

Upvotes: 0

Views: 54

Answers (2)

Vlad Eftimie
Vlad Eftimie

Reputation: 1

My advice is to replace table with divs if your project allows you to do it. You can use bootstrap (https://getbootstrap.com/examples/grid/) for making this easier. Why: 1. Cleaner code 2. You can manipulate the divs easier than table raws/cells... 3. You can duplicate div as fast as tr . Give it a try and than take your decision.

Upvotes: 0

GvM
GvM

Reputation: 1733

<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
   <form action="">
     <td colspan="3"><input type="text"></td>
   </form>
  </tr>
</table>

have you tried using colspan?

Upvotes: 1

Related Questions