Noobie table css problem

HTML & CSS
1

Hi there, many thanks to anyone who can help.

I am building a joomla webste from a template so i have limited control over the output. i want to pad these two cells seperately but this wont work.

<table class=" productdisplay “>
<tbody>
<tr>
<td class=”">
<td class=“column_separator”>
</tr></tbody></table>

.productdisplay table, td
{
padding: 0px 10px 10px 0px;
}

.column_separator .productdisplay table, td
{
padding: 0px 0px 10px 10px;}

Thanks

2

How can i refernce the td without a class?

3

Well you could style the td normally as you have it, but if you don’t want the class getting the styles then just override it :slight_smile:


#tableIDHere td{background:red;}
#tableIDHere td.someClass{background:white;/*or other color*/}
4

Thanks Ryan

unfortunately the table doesn’t have an ID the only thing that seperates the two cells is one has the class “column_separator”

I thought this would reference just that td
.column_separator .productdisplay table, td
{
padding: 0px 0px 10px 10px;}

and this would apply to the td with no style

.productdisplay table, td
{
padding: 0px 10px 10px 0px;
}

Why does .column_separator .productdisplay table, td
{padding: 0px 0px 10px 10px;} Style both cells

Many thanks

5

Why does .column_separator .productdisplay table, td
{padding: 0px 0px 10px 10px;} Style both cells
You have the .productdisplay class on the table already in the html so there is no need to add table in the selector.

If your just trying to target the td then remove the comma and the table. The comma is grouping them together.

How can i refernce the td without a class?
Try this -

[COLOR=Blue] .productdisplay  td[/COLOR] {
    padding: 0px 0px 10px 10px;
}
6

and this would apply to the td with no style

.productdisplay table, td
{
padding: 0px 10px 10px 0px;
}
No, what I just posted above would target the generic td.

Whenever a comma is in between two selectors it groups them together and they both share the styles.

Have a look through the CSS Reference for more understanding on selector grouping

7

Cheers Ryan i really appreciate your help with my noobie questions, BTW i do have a book on order i know i need it!!

This didn’t work
.productdisplay td {
padding: 0px 0px 10px 10px;
}

In the end the solution was (and i’m sure i had already tried this before!!!)

.productdisplay .column_separator {
padding: 0px 0px 10px 10px;
}

.productdisplay table, td
{
padding: 0px 0px 10px 0px;
}

8

I’m dont understand why this didn’t work?

.productdisplay .column_separator td {
padding: 0px 0px 10px 10px;
}

and this did

.productdisplay .column_separator {
padding: 0px 0px 10px 10px;
}

9

I’m dont understand why this didn’t work?

.productdisplay .column_separator td {
padding: 0px 0px 10px 10px;
}
Because you are trying to target a td within the td class .column_separator

You have got things confused with how selectors work.

and this did

.productdisplay .column_separator {
padding: 0px 0px 10px 10px;
}
That is the same as saying

[COLOR=Blue]table[/COLOR].productdisplay  [COLOR=Blue]td[/COLOR].column_separator {
padding: 0px 0px 10px 10px;
}

That is a descendant selector and it is targeting that td class when it is found in that specific table class

It is all explained here

.

10

Many thanks very helpfull and very confusing at the same time…i’ll have a read