html - Need help formatting a table properly with images and columns -


in app have view who's task display items , prices related item.

here's how view renders table results:

@if (model.count > 0) {     <table>         <tr>             <th>                 @html.actionlink("object name", "browseobjectlist", new { _sortorder = viewbag.cardnamesortparm })             </th>             <th>                 object image             </th>             <th>                 @html.actionlink("object provider name", "browseobjectlist", new { _sortorder = viewbag.objectprovidernamesortparm })             </th>             <th>                 @html.actionlink("highest price", "browseobjectlist", new { _sortorder = viewbag.highestpricesortparm })             </th>             <th>                 @html.actionlink("price date", "browseobjectlist", new { _sortorder = viewbag.pricedatesortparm })             </th>         </tr>          @for (int = 0; < model.count; i++)         {             var classname = i%2 == 0 ? "even" : "odd";             <tr class="@classname">                 <th rowspan="5">                     @html.actionlink(model[i].m_obj.m_objname, "objectpricelists", new { id = model[i].m_obj.m_id}, new {@class = "navlink" })                 </th>                 <th rowspan="5">                     @html.image(model[i].m_obj.m_objimagelink, model[i].m_obj.m_objname, null)                 </th>                 @for (int j = 0; j < model[i].m_itempricelists.count; j++)                 {                     <tr class="@classname">                         <td style="height: 100%">@html.displayfor(item => item[i].m_itempricelists[j].m_provider.m_providername)</td>                         <td style="height: 100%">@html.displayfor(item => item[i].m_itempricelists[j].m_pricehigh)</td>                         <td style="height: 100%">@html.displayfor(item => item[i].m_itempricelists[j].m_pricelistdate)</td>                     </tr>                 }             </tr>         }     </table> } 

right now, renders "ok" view shapes wanted, this:

object name object image    provider    highest price   price date                             prov 1                 1    2013-05-03                             prov 2                 2    2013-05-03 object 1    image           prov 3                 3    2013-05-03                             prov 4                 4    2013-05-03 

now that's wanted result. "object name" column single column, in excel page, , image single column well. each of "providers / highest price / price date" single line on same row object name , image. have shaped this:

object name object image    provider    highest price   price date                             prov 1            1         2013-05-03                             prov 2            2         2013-05-03                             prov 3            3         2013-05-03   object 1    image           prov 4            4         2013-05-03 

what need see here 4th provider line resizes in height match scale of image , object. "object 1" column , "image" takes height of image, height not divided evenly between each 4 providers. 4th resizes fill remaining spaces.

now know html layout may crappy since i'm beginning in html formatting, , i'd know how shape correctly every lines evenly sized.

edit

my case hard describe, here's excel demonstration of want , got:

problem example using excel

this might need tweaking side, i'd image should it:

    @for (int = 0; < model.count; i++)     {         var classname = i%2 == 0 ? "even" : "odd";         @for (int j = 0; j < model[i].m_itempricelists.count; j++)         {             <tr class="@classname" style="height:38px;">             @if(j == 0) {                 <td rowspan="4">                     @html.actionlink(model[i].m_obj.m_objname, "objectpricelists", new { id = model[i].m_obj.m_id}, new {@class = "navlink" })                 </td>                 <td rowspan="4">                     @html.image(model[i].m_obj.m_objimagelink, model[i].m_obj.m_objname, null)                 </td>             } else {                 <td></td>             }                 <td> @html.displayfor(item => item[i].m_itempricelists[j].m_provider.m_providername)</td>                 <td> @html.displayfor(item => item[i].m_itempricelists[j].m_pricehigh)</td>                 <td> @html.displayfor(item => item[i].m_itempricelists[j].m_pricelistdate)</td>             </tr>         }     } 

dtyle rows fixed height in pixels, being image height/rowspan.. http://jsfiddle.net/vukfx/2/


Comments

Popular posts from this blog

php - Why I am getting the Error "Commands out of sync; you can't run this command now" -

linux - Does gcc have any options to add version info in ELF binary file? -

java - Are there any classes that implement javax.persistence.Parameter<T>? -