Question

I have html table with format

<div id="divOutputWindow">
<table>
<tbody>
<tr>
<td>/* Set Width 10 Px */ </td>
<td>/* Set Width 20 Px */ </td>
</tr>
<tr>
/* Same for all tr */
</tr>
</tbody>
</table>
</div>

i.e. first td has width 10 px next td 15 px next td 20 px…likewise

What i Tried is

$('#divOutputWindow').find('table').$('tbody > tr > td').css('width', '10px');

Answer 1

• Loop trough each <td> inner your #divOutputWindow.
• Use .each(); for that, in the loop you can acces the current
  DOM-object by $(this).
• Define a minimum and a stepsize, use $(this).index(); for counting.
• Then use the .css('attr','value'); command to manipulate your
  current <td>. It’s a setter of the css attribute. Don’t forget to put "px" at the end.

The Code:

$('#divOutputWindow td').each(function() {
    var min = 10;                                  // Define a minimum
    var step = 5 * $(this).index();                // Define Step(your step is 5 here)
    $(this).css('width', (min + step) + "px");     // css attribute of your <td> width:15px; i.e.
});

Did it work?

Edit: i saw that @billyonecan already posted something similar, test both examples, mine works (i tested it)