Table Display In CSS : The Official Microsoft ASP.NET Forums

Reply

wertyuio1

Member

67 Points

116 Posts

Table Display In CSS

Feb 17, 2012 01:30 PM|LINK

Hi

Created a new table and I'm adapting a view to display data in MVC. When accessing loading my page the classes are referencing a preivous table created in my CSS from what I can see in FireFox. So instead of picking up lines 356 through 363 its refering back to a table that is based In Misceleouse class??

All help highly regarded.

Richard

model Nop.Web.Models.Catalog.ProductModel
<table style="width: 100%;"border="solid">
<tr class="product-item">
        <td class="picture">
            <a href="@Url.RouteUrl("Product", new { productId = Model.Id, SeName = Model.SeName })" title="@Model.DefaultPictureModel.Title">
            <img style="border-width: 0px;" alt="@Model.DefaultPictureModel.AlternateText" src="@Model.DefaultPictureModel.ImageUrl" title="@Model.DefaultPictureModel.Title" />
        </a>
        </td>
        <td class="StockCode">
        @Model.StockCode
        </td>
        <td class="Description">
        @Html.Raw(Model.ShortDescription)<text></text>
        </td>
        <td class="Size">
        @Html.Raw(Model.Size)<text></text>
        </td>
        <td class="PackSize">
        @Model.PackSize<text></text>
        </td>
        <td class="WholesalePrice">
        @Model.WholesalePrice<text></text>
        </td>
        <td class="QTYINSTOCK">
        @Model.QTYINSTOCK<text></text>
        </td>
        <td class="RRP">
        @Model.RRP<text></text>
        </td>
        <td>
            &nbsp;
        </td>
    </tr>
</table>

.product-list .item-block .product-item .picture {float:left;border:2px solid #CCCCCC;}
.product-list .item-block .product-item .StockCode {border:2px solid #CCCCCC;font-weight:700;font-size:12px;}
.product-list .item-block .product-item .Description{border:2px solid #CCCCCC;font-weight:700;font-size:12px;}
.product-list .item-block .product-item .Size{border:2px solid #CCCCCC;font-weight:700;font-size:12px;}
.product-list .item-block .product-item .PackSize{border:2px solid #CCCCCC;font-weight:700;font-size:12px;}
.product-list .item-block .product-item .WholesalePrice{border:2px solid #CCCCCC;font-weight:700;font-size:12px;}
.product-list .item-block .product-item.RRP{border:2px solid #CCCCCC;font-weight:700;font-size:12px;}
.product-list .item-block .product-item .QTY{border:2px solid #CCCCCC;font-weight:700;font-size:12px;}

/* MISC. CLASSES */
td{vertical-align:middle;padding-top:5px}
td.fieldname{font-size:12px;}
.table-container{}
.table-container .row{}
.table-container .row .item-name{padding:3px 10px 0 0;display:block;white-space:nowrap;padding-right:10px;vertical-align:middle;}
.table-container .row .item-value{padding:3px 0 0;vertical-align:middle;}

Richard Evans

Edited by wertyuio1 on Feb 17, 2012 01:31 PM

Reply

giop

Member

378 Points

81 Posts

Re: Table Display In CSS

Feb 17, 2012 01:43 PM|LINK

You have to target the table, in CSS, by #ID, or Child class nodes.

MVP Client Operating System
Please Mark as Answer if it helps :)

Reply

wertyuio1

Member

67 Points

116 Posts

Re: Table Display In CSS

Feb 17, 2012 01:50 PM|LINK

For example please??

.product-list .item-block .product-item .td.StockCode{border:2px solid black;font-weight:700;font-size:12px;font:black;}

Richard Evans

Edited by wertyuio1 on Feb 17, 2012 01:50 PM

Reply

giop

Member

378 Points

81 Posts

Re: Table Display In CSS

Feb 17, 2012 02:15 PM|LINK

Your CSS targetting class aren't well contructed. Many ways to correct that.

.product-list .item-block .product-item, means : all childs of product-list -> item-block -> product item get the style.

To override, your table must have classes : product-list, you must too , delete .itemblock between .product-list and product-item,

.product-list .item-block .product-item

OR add : ".product-list product-item ," if you want to keep the old classes.

.product-list product-item , .product-list .item-block .product-item

Other example :

model Nop.Web.Models.Catalog.ProductModel

<table style="width: 100%;"border="solid" class="product-list">
<tr class="product-item">
        <td class="picture">
            <a href="@Url.RouteUrl("Product", new { productId = Model.Id, SeName = Model.SeName })" title="@Model.DefaultPictureModel.Title">
            <img style="border-width: 0px;" alt="@Model.DefaultPictureModel.AlternateText" src="@Model.DefaultPictureModel.ImageUrl" title="@Model.DefaultPictureModel.Title" />
        </a>
        </td>
        <td class="StockCode">
        @Model.StockCode
        </td>
        <td class="Description">
        @Html.Raw(Model.ShortDescription)<text></text>
        </td>
        <td class="Size">
        @Html.Raw(Model.Size)<text></text>
        </td>
        <td class="PackSize">
        @Model.PackSize<text></text>   
        </td>
        <td class="WholesalePrice">
        @Model.WholesalePrice<text></text>
        </td>
        <td class="QTYINSTOCK">
        @Model.QTYINSTOCK<text></text>
        </td>
        <td class="RRP">
        @Model.RRP<text></text>
        </td>
        <td>
            &nbsp;
        </td>
    </tr>
</table>

.product-list  .product-item .picture {float:left;border:2px solid #CCCCCC;}
.product-list  .product-item .StockCode {border:2px solid #CCCCCC;font-weight:700;font-size:12px;}
.product-list  .product-item .Description{border:2px solid #CCCCCC;font-weight:700;font-size:12px;}
.product-list  .product-item .Size{border:2px solid #CCCCCC;font-weight:700;font-size:12px;}
.product-list .product-item .PackSize{border:2px solid #CCCCCC;font-weight:700;font-size:12px;}
.product-list .product-item .WholesalePrice{border:2px solid #CCCCCC;font-weight:700;font-size:12px;}
.product-list  .product-item.RRP{border:2px solid #CCCCCC;font-weight:700;font-size:12px;}
.product-list  .product-item .QTY{border:2px solid #CCCCCC;font-weight:700;font-size:12px;}

/* MISC. CLASSES */
td{vertical-align:middle;padding-top:5px}
td.fieldname{font-size:12px;}
.table-container{}
.table-container .row{}
.table-container .row .item-name{padding:3px 10px 0 0;display:block;white-space:nowrap;padding-right:10px;vertical-align:middle;}
.table-container .row .item-value{padding:3px 0 0;vertical-align:middle;}

MVP Client Operating System
Please Mark as Answer if it helps :)

Edited by giop on Feb 17, 2012 02:15 PM
Edited by giop on Feb 17, 2012 02:17 PM
Edited by giop on Feb 17, 2012 02:18 PM
Marked as answer by wertyuio1 on Feb 17, 2012 02:40 PM

Reply

wertyuio1

Member

67 Points

116 Posts

Re: Table Display In CSS

Feb 17, 2012 02:27 PM|LINK

How do apply the cross out function you have in item block?

.product-list .item-block .product-item

Thank you

Richard Evans

Reply

giop

Member

378 Points

81 Posts

Re: Table Display In CSS

Feb 17, 2012 02:32 PM|LINK

Be careful, two methods, but differents rendering, due to you MISC style, and class nodes.

<table style="width: 100%;"border="solid" class = "product-list item-block">

OR

<div class="product-list">
  <table style="width: 100%;"border="solid" class = "item-block">
[...]
</div>

MVP Client Operating System
Please Mark as Answer if it helps :)

Edited by giop on Feb 17, 2012 02:33 PM
Edited by giop on Feb 17, 2012 02:33 PM

Reply

wertyuio1

Member

67 Points

116 Posts

Re: Table Display In CSS

Feb 17, 2012 02:40 PM|LINK

.product-list  .product-item .picture {float:left;border:2px solid #CCCCCC;}
.product-list  .product-item .StockCode {border:2px solid #CCCCCC;font-weight:700;font-size:12px;}
.product-list  .product-item .Description{border:2px solid #CCCCCC;font-weight:700;font-size:12px;}
.product-list  .product-item .Size{border:2px solid #CCCCCC;font-weight:700;font-size:12px;}
.product-list .product-item .PackSize{border:2px solid #CCCCCC;font-weight:700;font-size:12px;}
.product-list .product-item .WholesalePrice{border:2px solid #CCCCCC;font-weight:700;font-size:12px;}
.product-list  .product-item.RRP{border:2px solid #CCCCCC;font-weight:700;font-size:12px;}
.product-list  .product-item .QTY{border:2px solid #CCCCCC;font-weight:700;font-size:12px;}

Thank you kindly!

Richard Evans

Reply

zhughes

Member

240 Points

198 Posts

Re: Table Display In CSS

Feb 17, 2012 03:03 PM|LINK

wrap your page in a div & give it an id.

your markup..table, etc

</div>

then reference your css like this:

#Product .product-list .item-block .product-item .StockCode

Just a note, since all of your styles are identical (stock code, description, etc) you can make one style & assign it to all of your td's.

So you could just do one #Product table tr td .inputField{border:2px solid #000} and just assing all your td's like this <td class="inputField">

Reply

Smith Peter

Member

142 Points

52 Posts

Re: Table Display In CSS

Feb 21, 2012 12:56 PM|LINK

Hi,

You have to target your table by

#table-id

{

}

Reply

wertyuio1

Member

67 Points

116 Posts

Re: Table Display In CSS

Feb 22, 2012 08:17 AM|LINK

Hi have designed the following table but I'm having an error with the following code its stating that an identifier is needed. I have also attached the code for the table which is being currently designed.

Thank you Richard

@foreach (Nop.Web.Models.Catalog.ProductModel)
 {

            <div class="product-list">
             <div class="Product">
              Product List
             </div>
             <br />
             <div class="product-block">
             <table id = "Product-Header">
                    <thead>
                    <tr>
                        <th class="image">
                            &nbsp;
                        </th>
                        <th class="Code">
                           Code
                        </th>
                        <th class="Description">
                           Descricption
                        </th>
                        <th class="Size">
                            Size
                        </th>
                        <th class="PackSize">
                            Pack 
                            <br />
                            Size
                        </th>
                        <th class="Price">
                            Price
                        </th>
                        <th class="QTYINSTOCK">
                            QTY IN 
                            <br />
                            STOCK
                        </th>
                        <th class="RRP">
                            RRP
                        </th>
                        <th class="QTY">
                            QTY
                        </th>
                        </tr>
                        </thead>
                        </table>
                    
                    @foreach (Nop.Web.Models.Catalog.ProductModel)
                    {
                        <table>
                        <tbody>
                        <tr class="product-item">
                        <td class="picture">
                        <a href="@(Url.RouteUrl)( product, new { productId = Model.Id, SeName = Model.SeName })" title="@Model.DefaultPictureModel.Title">
                        <img style="border-width: 0px;" alt="@Model.DefaultPictureModel.AlternateText" src="@Model.DefaultPictureModel.ImageUrl" title="@Model.DefaultPictureModel.Title" />
                        </a>
                        </td>
                        <td class="StockCode">
                        @(Model.StockCode)
                        </td>
                        <td class="Description">
                        @(Model.Name)
                        </td>
                        <td class="Size">
                        @(Model.Size)
                        </td>
                        <td class="PackSize">
                        @(Model.PackSize) 
                        </td>
                        <td class="WholesalePrice">
                        @(Model.WholesalePrice)
                        </td>
                        <td class="QTYINSTOCK">
                        @(Model.QTYINSTOCK)
                        </td>
                        <td class="RRP">
                        @(Model.RRP)
                        </td>
                        <td>
                        <input id= "But   " type="button" value="" { style = "width:10px"})/> 
                        <input id= "Text1 " type="text"    { style = "width:20px" "right"})/>
                        <input id= "Butt  " type="button" value="" { style = "width:10px"})/>
                        </td>
                        </tr>
                        </tbody> 
                        </table>
                        
                     }

Richard Evans

Table Display In CSS RSS

17 replies

wertyuio1

Table Display In CSS

giop

Re: Table Display In CSS

wertyuio1

Re: Table Display In CSS

giop

Re: Table Display In CSS

wertyuio1

Re: Table Display In CSS

giop

Re: Table Display In CSS

wertyuio1

Re: Table Display In CSS

zhughes

Re: Table Display In CSS

Smith Peter

Re: Table Display In CSS

wertyuio1

Re: Table Display In CSS

This site is managed for Microsoft by Neudesic, LLC. | © 2013 Microsoft. All rights reserved.

Follow Us On:

Microsoft