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:

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
Post a Comment