Flexible Web Services Info Tech Support

Everyone is pretty much aware of the problems one encounters when trying to create a form that spans multiple columns in a table. It doesn't work. If you put the <form> tag in the first column, the first </td> it runs into inserts a </form> and completely ignores the form tag you placed elsewhere in the row. So, off I went in search of a solution.

Use DIV instead of TABLES

The big push I see a lot of designers go for is to not use tables at all. Use divs in their place, but the responsive divs I've used for table forms were cumbersome and didn't respond as I expected. The first div group I came across used this css contraption:

.table { display: table; }
.table>* { display: table-row; }
.table>*>* { display: table-cell; }

They provided this HTML to go with it.

<div class="table">
  <form>
    <div>snake<input type="hidden" name="cartitem" value="55"></div>
    <div><input name="count" value=4/></div>
  </form>
</div>

This code is super simple, too simple. Notice that the html has no row div. That caused me endless amounts of trouble and sent me off to research how > and * worked in CSS. Obviously, all the children of the class "table" cascade, each level in order, table, row, and cell.

It doesn't have to be a div. As it turns out, the form tag acts as a row. I noticed this note from the author:

I wanted to emphasize the fact that you should not put a div to display as the table-row around the divs that are displaying as a table-cell, and that the form itself should display as table-row

I needed the form to span columns but I also needed a div to insert rows dynamically. Both tags destroyed my layout, so I couldn't use the above CSS for my form and I found that specifying classes for each element of the table didn't help either. I created this one and eventually used all of if with one modification:

.grid { display: table; }
.gridr { display: table-row; }
.gridc { display: table-cell; }

But, inserting the form tag and any other div tag gave me very similar results as the .table CSS. When I used a table instead of a div, tbody would allow me to group the rows that would be filled in with dynamic content. I would pick a date on the calendar and if that date had data in it, it would fill in the table rows with that data. I read that all of the table elements had a display element, but finding what the names of those table elements were was very hard. The note only showed one element besides table, table-row. I guess they assumed that we could guess at what the other element names were (This is one of my great frustrations. There doesn't appear to be a cookbook to explain or even list the incredients of functions, libraries and/or css elements just to name a few. They give you a sample and you have to figure out the rest.)

I finally found the element I was looking for: table-row-group. I assume that css stylesheets use thead, tbody and tfoot all use table-row-group. A note here, I had to use a different name (and I know know that there is an element called grid, so that may not have been a good name to use) for this class because I was already using a table class and I needed this just for this one table on the page. So I simply added the follow to the grid elements above:

.gridrg { display : table-row-group; }

But I still can't use a div for the table-row. I put the class in the form tag: <form class="gridr">

using table-row-group allows me to group the rows together so that I can insert rows into the group with $("#groupname").load("getdata");