HTML Table to Div Conversion

To convert the HTML table tag to div tag.

by asifmohammed

HTML

<span style="text-decoration:underline;">
HTML Table
</span>
<div class="content">
<table style='border: 1px #EFEFEG solid'>
    <tbody>
        <tr class="field-row">
            <td nowrap="nowrap" class="field-label valign-bottom">Title</td>
            <td class="field-help-sep"></td>
            <td nowrap="nowrap" class="field-input">
              <div class="field-inline-block valign-bottom">
                  <pre class="field-help-inline">A brief summary of the issue being reported</pre>
                  <input type="text" class="field-instruction-color" maxlength="80" size="60" />
             </div>
             <div class="field-error hide"></div> 
            </td>
        </tr>
        <tr class="field-row">
            <td nowrap="nowrap" class="field-label ">Description</td>
            <td class="field-help-sep"></td>
            <td nowrap="nowrap" class="field-input">
                <div class="field-inline-block valign-bottom">
                    <pre class="field-help-inline">Detailed information about the issue being reported, including the nature of the problem and the steps needed to reproduce the behavior</pre>
                <textarea class="field-fixed-width field-instruction-color" cols="80" rows="5" wrap="soft"></textarea>
                </div>
                <div class="field-error hide"></div>
            </td>
        </tr>
    </tbody>
</table>
<br />
<br />
<span style="text-decoration:underline;">
DIV Table
</span>
<div class='field-table'> <!--begin table-->
    <div class='field-row'> <!--begin tr-->
        <span class='field-row-label'> <!--begin td nowrap-->
          Title
        </span> <!--end td-->
        <span class='field-help-sep'></span>
        <div class='field-row-input'> <!--begin 2nd td nowrap-->
          <div>
             <pre class='field-help-inline'>A brief summary of the issue being reported</pre>
             <input type='text1' />
          </div>
          <div class='field-error...

CSS

.content {
    font-family: Arial,Lucida Grande,Lucida Sans,sans-serif;
    font-size: 0.9em;
}

.add-record-table {
}

.field-table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
}

.field-row {
    border-bottom: 1px dotted #E6E6E6;
    border-top: 1px dotted #E6E6E6;
}

.add-record-table td.field-label {
    width: 20%;
}
.field-table td {
    padding: 8px;
    vertical-align: top;
}
.field-label {
    background: none repeat scroll 0 0 #F8F8F8;
    padding: 7px;
    width: 200px;
}
.valign-bottom {
    vertical-align: bottom !important;
}
.field-inline-block {
    display: inline-block;
    padding: 0 12px 0 0;
}

.field-help-sep {
    background: none repeat scroll 0 0 #F8F8F8;
    padding: 8px 4px 4px 2px !important;
    width: 10px;
}

.field-help-inline {
    color: #A575A5;
    font-family: Arial;
    font-size: 11px;
    padding: 0 0 3px;
}

.hide {
    display: none;
}

/* class for Div Table  */

span{
  border: 0 none #ACACAC;
}

.field-row-label
{
  float: left;
  width: 20%;
  padding: 8px;
  vertical-align: bottom;
  background: none repeat scroll 0 0 #F8F8F8;    
}

.field-row-input
{
    float: left;
    padding: 8px;
    vertical-align: top;
    background: none repeat scroll 0 0 #FFFFFF;
}

.clear-both
{
    clear: both;
}

.float-left  
{
    float: left;
}

.float-right  
{
    float: right;
}