Set fontsize of every cell in html table

1

Hi

Is there a single line of code to set the fontSize of every cell in an html table? Can be at the <td> or <tr> level. Prefer to avoid the <th> but interested if there is a <table> level style to set.

Trying to avoid iterating through 4000 rows.
Note, this is not at design time. I need this to execute in code, depending on user input.

Cheers

2

I think you can just set the fontsize of the table element at runtime:element.fontSize=xx.

This will affect the th elements as well, of course.

If you are willing to change the fontsize of every td on the page, you could use the function addStyle (defined below) and apply it to a string like “td {font-size:xx}” where xx is the new fontsize. You can define this string at runtime.

addStyle is

function addStyle(r){
   var style = document.createElement('style');
   style.innerHTML = r;
   document.head.appendChild(style);
}

It would be less extreme to assign a class to each td in your table at design time and then use addStyle on that class.

You can addStyle to the same tag numerous times—the last one will govern, but it is nicer code to name the new style and remove it before adding a new style.

3

try,

css

.tableFont tr td {
font-size: 12px;
}

Then call,

element.className = "tableFont"; to apply the font-size 12px;

You might need a forEach to loop through all the table rows.

4

Thank you for your time. I’ve got many tables in my project, by the looks the styling would affect them all?

5

Thank you but I can’t get this to work. “element” being the HTML table name?

6

Create each table with a different class—each td in the table would be class = “classNameUniqueToThisTable”. (If you don’t mind setting the fontsize for the th the same, you can just define each table with a unique class name)

You don’t have to put in any css in the program.

At runtime to change the fontsize for all tds or the whole table whose class is “class1” to size xx just do

var s= “class1 {fontsize:xx}”;

addStyle(s);