In a jQuery call, I am working with a string of HTML as shown below:
var template = '<html >' +
'<head>' +
'<h1>Most important heading here</h1>'+
'</head>' +
'<body>' +
'<table border="2px" class="ExlTable"><tr bgcolor="#87AFC6">{table}</table>' +
'</body></html>';
I am inserting existing table data into the {table} placeholder.
To set the size of the table's th and td elements, I am currently using the following code:
$('th').css('width', '200');
$('th').css('height', '30');
$('td').css('height', '30');
However, this code is affecting all tables on the page. I have tried to target specific table elements using the following methods, but they are not working:
$('.ExlTable th').css('width', '200');
$('.ExlTable th').css('height', '30');
$('.ExlTable td').css('height', '30');
The above code did not work as expected. I also attempted the following approach, but it also did not work:
var $template = $(template);
$template.find('th').css('width', '200');
$template.find('th').css('height', '30');
$template.find('td').css('height', '30');
If you have any suggestions or solutions, please help. Thank you.