30

I want to put two tables (on the same page) which should render differently (i.e. use different CSS for each table). Is it possible?

2
  • 7
    Assign different CSS classes to each?
    – trojanfoe
    Nov 3, 2011 at 8:54
  • 1
    This is a very good question. Why is it labelled off-topic??? According to the tags, it is very on-topic! I think that this "banning" does not meet Stack Overflow guidelines and that such bannings must be banned! :)
    – Apostolos
    Dec 15, 2020 at 9:55

5 Answers 5

78

In your html

<table class="table1">
<tr>
<td>
...
</table>

<table class="table2">

<tr>
<td>
...
</table>

In your css:

table.table1 {...}
table.table1 tr {...}
table.table1 td {...}

table.table2 {...}
table.table2 tr {...}
table.table2 td {...}
0
7

You need to assign different classes to each table.

Create a class in CSS with the dot '.' operator and write your properties inside each class. For example,

.table1 {
//some properties
}

.table2 {
//Some other properties
}

and use them in your html code.

5

Of course, just assign seperate css classes to both tables.

<table class="style1"></table>
<table class="style2"></table>

.css

table.style1 { //your css here}
table.style2 { //your css here}
3
<table id="table1"></table>
<table id="table2"></table>

or

<table class="table1"></table>
<table class="table2"></table>
3

Of course it is!

Give them both an id and set up the CSS accordingly:

#table1
{
    CSS for table1
}


#table2
{
    CSS for table2
}

Not the answer you're looking for? Browse other questions tagged or ask your own question.