Tables in a Responsive Web Design

Question

I've followed the typical way a form has been setup in an application, which is to use a table that looks like this:

<table>
  <tbody>
    <tr>
      <td>Field</td>
      <td>@Html.TextBox("Field")</td>
    </tr>
    <tr>
      <td>Field 2</td>
      <td>@Html.TextBox("Field2")</td>
    </tr>
  </tbody>
</table>

Which produces a format like:

Field    <TextBox>
Field    <TextBox>

Most mobile designs lay it out this way:

Field
<TextBox>
Field
<TextBox>

Which is something I need to do because some of my forms are too long to display in a mobile browser. Is there an easy way to set this up? Maybe there is a way to make each cell render on a new line, which would work for me? Something cross-browser supported?

Or is a redesign necessary?

Thanks.

Answer 1

Yea you can do something like this drop the table display for smaller viewports:

@media (max-width:40em) {
    table, thead, tbody, tfoot, th, td, tr { display:block; }
    tr + tr { margin-top:1em; }
}

See: css-tricks.com/responsive-data-tables/

Answer 2

I usually do form markup as a list (which type depend on the needs) or a series of divs. Basically every field has a containing element. For a simple example I'll use a div here but thats usually the containing element of last resort for me:

<div class="input-text form-field">
   <label for="the_element">Text Input</label>
   <input id="the_element" type="text" />
</div>

This is really best because while the markup is at least a bit more semantic and it gives us a ton of possibilities.

Stacked labels:

  .form-field label { display: block; }

Fixed width labels:

.form-field {overflow: hidden; width: 200px;}
.form-field label {width: 40%; margin-left: 10%;}
.form-field label, .form-field input, .form-field select, .form-field textarea {float: left; width: 50%;}

This mark up also gets you 2-up fields pretty easily

Markup:

<fieldset>
  <legend>Name</legend>
  <div class="input-text form-field">
       <label for="first_name">First Name</label>
       <input id="first_name" type="text" />
  </div>
  <div class="input-text form-field">
       <label for="last_name">Last Name</label>
       <input id="last_name" type="text" />
  </div>
</fieldset>

CSS

fieldset {overflow: hidden;}
.form-field {overflow: hidden; width: 200px; float:left; margin-left: 20px;}
.form-field label { display: block; }
.form-field input, .form-field select .form-field textarea {display: block; width: 100%;}

You get the general idea. If you do it this way and use realtive widths when needed you can make the form totally responsive.

Answer 3

In mobile devices - td{ display:block }