table data to div's for responsive design

[dwlamb]

I have a php application for a cookbook site. To make this application responsive for all devices, I need to convert the listing of ingredients from a table format to div's but I am having a challenge with how to set-up the div structure and css.

To better explain what I have presently and what I want, kindly click here.

This is a typical block of recipe ingredients:

<table id="recipe">
    <tr>
        <td class="ingramt">2½</td>
        <td class="ingred">cups flour</td>
        <td class="ingramt">1 tbsp</td>
        <td class="ingred">baking powder</td>
    </tr>
    <tr>
        <td class="ingramt">½ cup</td>
        <td class="ingred">butter or shortening</td>
        <td class="ingramt">1</td>
        <td class="ingred">egg</td>
    </tr>
    <tr>
        <td class="ingramt">1 tsp</td>
        <td class="ingred">salt</td>
        <td colspan="2" class="merged">some milk</td>
    </tr>
</table>

As you can see from the mark-up, I have four table columns to create two columns of data. For higher resolutions I want the div's and css to render the appearance much the same as the table method. Using media queries in the css for screen widths like smart-phones, I desire the two table columns of data on the right to appear below the two on the left but using divs. (Refer to the demo website stated above to see what I mean)

The mark-up for div's would appear much like:

<div id="recipe">
    <div class="ingredBlock">
        <div class="ingramt">2½</div>
        <div class="ingred">cups flour</div>
        <div class="ingramt">1 tbsp</div>
        <div class="ingred">baking powder</div>
    </div>
    <div class="ingredBlock">
        <div class="ingramt">½ cup</div>
        <div class="ingred">butter or shortening</div>
        <div class="ingramt">1</div>
        <div class="ingred">egg</div>
    </div>
    <div class="ingredBlock">
        <div class="ingramt">1 tsp</div>
        <div class="ingred">salt</div>
        <div class="merged">some milk</div>
    </div>
</div>

Can someone think of a better method for the desired effect? What would the css have to be for aligning divs as required?

[iamthwee]

http://www.getskeleton.com/

[BMXDad]

Nothing wrong with using tables in a responsive site. Just make sure that word wrap is on. Some data by its nature is not able to be completly responsive though, and thats ok ...

Another option would be to put it in a horizontal form with labels. These would stack nicely if the viewport was to small.

[TomH.PG]

you should probably use the table & table-cell css 'display' parameters if needing to implement any grid-type layout with divs. Alternatively I would continue using tables if you need to display actual tabular data.

See http://ajaxian.com/archives/display-table for a good discussion of the 2 approaches!

[gabrielcastillo]

You could try something like this.. you will need to change the css. I didn't test it out but you can get the just of it.

<form action="" method="" />
<h3 class="table-head">Table Header</h3>
<div class="table-row">
    <label class="row-label">Label</label>
    <div class="row-input">
    <input type="text" name="" value="" />
    </div>
</div>
<div class="table-row">
    <label class="row-label">Label</label>
    <div class="row-input">
    <input type="text" name="" value="" />
    </div>
</div>
<div class="table-row">
    <label class="row-label">Label</label>
    <div class="row-input">
    <input type="text" name="" value="" />
    </div>
</div>
<div class="table-row">
    <label class="row-label">Label</label>
    <div class="row-input">
    <input type="text" name="" value="" />
    </div>
</div>
</form>




.table-row {
    display:table;
    border-top:1px solid #dddddd;
    border-right:1px solid #dddddd;
    border-left:1px solid #dddddd;
    padding:5px 0;
    overflow:hidden
}

.table-row:last-child {
    border-bottom:1px solid #dddddd;
}

.row-label {
    display:table-cell;
    width:100px;
    line-height:1.5em;
}

.row-input {
    padding:10px 5px;
}

[theHop]

Could you not use an unordered list? Seems to suit the situation better

[dwlamb]

An unordered list would not suffice because of the need for consistent placement between the amount of the ingredient and the ingredient. A gutter/invisible cell-border is necessary.

[TomH.PG]

I think using display:table on the <li> elements, and then display:table-cell on <span> elements inside each may allow you to use a ul (more semantically correct) with a grid layout (how you want it displayed)