I am creating a table using Javascript that will input the cell values dynamically and also the cell widths are computed using a complex formula, finally in terms of percentage. Now I am unable to set cell widths in Javascript according to the widths I have obtained from calculation. In a broader sense, each row may have columns of different widths and of course number of columns in each row will also differ. How to crack this logic?
It may look like this ...
You could use one table element for each row and set the td width css property using javascript based on the results of your computations:
<table id="row1">
<tr>
<td>a</td>
<td>b</td>
</tr>
</table>
<table id="row2">
<tr>
<td>c</td>
<td>d</td>
</tr>
</table>
And javascript:
var cells = document.getElementsByTagName('td');
var calculatedWidths = [25, 100, 100, 25];
for(var i = 0; i < cells.length; i++){
cells[i].style.width = calculatedWidths[i] + "px";
}
See this jsFiddle.
var tds = document.getElementsByTagName('td');
for (var i = 0; i < tds.length; i++) tds[i].style.width = '2px';
