Trying to create a class for Table with td styles

[lzr0]

Hi, I am trying to create a table with specific styles of the table itself and of its td cells. So, I wrote in CSS file:
.myclass table {blablbla1;}
th {blablabla2;}
td {blablabla3;}

It does not seem to work though when I call this class in HTML ( table class=myclass" ).
I wonder if the browsers consider that th and td lines like in CSS file related to .myclass ? In other words, does .myclass line as written above describes both the table AND th, td cells, or only the table?

[not2easy]

It is hard to guess what the problem is with your description, sorry. Obviously this is not the content of your css file and the examples give no clue as to what might need some work. If

( table class=myclass" )

is what you have in the html that isn't going to do anything.

Assuming that whatever has been replaced with "blablabla1" is valid css with valid syntax the least you would need is something like:

<table class="myclass">
<th>content</th>
<tr>
 <td>content</td>
</tr>
</table>

I wonder if the browsers consider that th and td lines like in CSS file related to .myclass ?

No, the

th {blablabla2;}

and

td {blablabla3;}

instructions would apply to every <th> and <td> the browser finds in the page unless you were to assign a class to those elements.

We are happy to help you troubleshoot valid css but it is sort of impossible to guess what works or does not work (or why) in this case. Could you be a little more specific? Not the entire .css file but enough to see what you are working with here.

[lzr0]

No, the
th {blablabla2;}
and
td {blablabla3;}
instructions would apply to every <th> and <td> the browser finds in the page unless you were to assign a class to those elements.

Hi, thank you for replying. I am trying to describe styles of a particular table (not any table, so I want to assign a class) along with style of all TDs in that particular table. If I understand you correct, the way I wrote the class description it applies only to the table, and not to the following lines that describe styles of TD. So, I can't create one class that describes the styles of both a table and of all its td's? In other words [again, if I understand you correct], I need to describe style of td's by a different class, and in the html call for this class in every td cell? I thought there must be a simpler way of doing this.

[not2easy]

Using a class would apply for all td.myclass and th.myclass but you need to add the class to the th and td as in <td class="myclass"> and <th class="myclass"> for the html and add .myclass to the css corresponding to the elements like td and th to use with the "myclass" table.

You could change what you have to this:

th.myclass {blablabla2;}

and

td.myclass {blablabla3;}

And change the html to:

<table class="myclass">
<th class="myclass">content</th>
<tr>
 <td class="myclass">content</td>
</tr>
</table>

I hope that helps.

If it still does not work as expected, take your css and html to validate it: https://validator.w3.org/nu/

[lucy24]

.myclass table {blablbla1;}

This line means “any table within any element of class myclass”. From your posts, it looks as if you meant

table.myclass {blahblah}

And from there, if appropriate, you go on to

table.myclass th {blah blah}
table.myclass td {blahblah}

each of which will override any css you may have set for th-in-general or td-in-general.

[lzr0]

It is hard to guess what the problem is with your description, sorry. Obviously this is not the content of your css file and the examples give no clue as to what might need some work.

Here is an example of the lines in CSS file:

.mytable table {width:100%; border: 4px solid #c2f0c2; border-collapse: collapse; border-spacing:0px;}
td {border: 2px solid #c2f0c2; padding:1px; } 

Then in html I put of course <table class="mytable">.
In the browser the TD cells appear with spacing between them inspite of what stated in the table css. And I also thought (mistakenly as you explained) that the style for TD would apply only to TD's in the table of mytable class.

[lzr0]

@Lucy

From your posts, it looks as if you meant
table.myclass {blahblah}
And from there, if appropriate, you go on to
table.myclass th {blah blah}
table.myclass td {blahblah}

That's what I was looking for! It works the way I was looking for. Thank you.

[tangor]

Came late to the party on this thread.

I've been using

table.dark
table.grey
table.red

for a few years, each with an obvious intent. :)

CSS is SO flexible for styling cues!