View Full Version : Restrict Table Style to a DIV

07-21-2008, 06:52 PM
I'm using a shopping cart program that requires me to drop a code snippet into my site. It calls a javascript to display the cart, so I cannot see the HTML being output. I did figure out, however, that I can define styles for table and input elements to customize the cart a bit.

Problem is, I want to define styles for inputs and tables for the cart ONLY, and if I define those anywhere on the page or in a linked stylesheet, they are applied to all tables and inputs on my page.

I can't get rid of the other tables because they are generated by similar systems on other areas of the page - i didn't put them there by choice. And the inputs - there's no way around those at all...

Is there a way to wrap the cart portion of the page in a DIV, and the define styles for tables within that DIV only?

07-21-2008, 07:49 PM
Your solution (wrapping the cart in a div and then targetting the cart table elements using that div) should work. CSS can be applied to elements only when they appear inside other named elements.

It would look something like this:



<div id="cart_wrapper">
[Cart HTML]



#cart_wrapper td {
background-color: #0f0;
border: 1px solid #000;

#cart_wrapper table {
border: 1px solid #000;

07-21-2008, 07:55 PM
thanks so much! i was trying "td.cart" or "td:cart" etc, do try to define the styles... i guess i've just never been too clear on how exactly that works.

07-21-2008, 07:57 PM
It's difficult without having access to the markup to add classes and ids. I'm dealing with something similar: having to style an e-commerce application written in ASP with little access to or knowledge of the controls that make up the application. It's a lot of reverse engineering from the outputted source code. What I've had to do in many instances is, instead of referring to a div or a table's class or id, using the classes or ids that are given and working from that.

Are there any classes or ids assigned anywhere on the page? A lot of my CSS ends up looking like this:

#rightSideContainer table table td{

...for example. Of course that doesn't work in all instances. There's only so much you can do without being able to assign classes and ids.

Also a link or some code would be helpful.

Edit: Too slow! :)

07-21-2008, 08:11 PM
thanks msuffern, that was the first thing i looked for - i run into this a lot, as i'm sure many others do, trying to integrate third-party apps. the problem was, there was no HTML output - everything was happening via the javascript.

i actually asked the third party's support if there were any classes assigned to the elements i wanted to change, and they told me it was just a plain old, unlabled table.

thanks again for the reply though.