What is an efficient way to set CSS class for each cell in a given table row?

I have a problem setting the CSS class for each cell in a given table row. Initially I thought setting the parent row CSS would affect the style properties of cells, but that doesn't work. Instead I have to loop through all the cells in a given row to updated the CSS class.

However this is not efficient. And it took a lot of time. Consider my situation: I have around 230 rows in which each row has 23 cells (totally 5290 cells).

Note: I don't use any frameworks. so please can you suggest an approach in native JS?

UPDATE :

its working fine using the Paolo's recommendation..

Initially my custom css class is been like this

.Grid_RowItalicsBold { PADDING-RIGHT: 5px; PADDING-LEFT: 8px; FONT-WEIGHT: bold; FONT-SIZE: 8pt; OVERFLOW: hidden; COLOR: Black; LINE-HEIGHT: 15pt; FONT-STYLE: normal; FONT-FAMILY: Verdana, Arial, Sans-Serif; WHITE-SPACE: nowrap; BACKGROUND-COLOR: yellow; TEXT-DECORATION: none }

And i changed this to

tr.Grid_RowItalicsBold td{ PADDING-RIGHT: 5px; PADDING-LEFT: 8px; FONT-WEIGHT: bold; FONT-SIZE: 8pt; OVERFLOW: hidden; COLOR: Black; LINE-HEIGHT: 15pt; FONT-STYLE: normal; FONT-FAMILY: Verdana, Arial, Sans-Serif; WHITE-SPACE: nowrap; BACKGROUND-COLOR: yellow; TEXT-DECORATION: none }

And i assigned this class to my specific rows using javascript. :)

Solution

Why can't you set the class of the row and adjust your css accordingly?

<tr class="myclass">
   <td>...</td>
   <td>...</td>
</tr>

Then in CSS:

tr.myclass td {
    ...
}

In either case, assuming the table has an id of "mytable" you could give all the table rows the class you want like so:

var rows = document.getElementById('mytable').getElementsByTagName('tr');
for(var x = 0; x < rows.length; x++) {
    rows[x].className = rows[x].className + " myclass";
}

If you're doing this to the whole table, though, you might as well just give a class to the table tag itself then do:

table.myclass tr td {
    ...
}