How to set HTML table cell width using JavaScript and jQuery

Question

I have a HTML table like the below;

<table style="width: 100%">
<tr>
<td style="width: 30px">cell</td>
<td class="cell">cell</td>
<td class="cell">cellcell</td>
<td class="cell">cellcellcell</td>
<td class="cell">cellcellcellcell</td>
<td class="cell">cellcellcellcellcell</td>
<td class="cell">cellcellcellcellcellcell</td>
<td style="width: 30px">cell</td>
</tr>
</table>

The table is designed to stretch to screen (or a div having specific width). I want equal width for all cells having class="cell" and this works well when the character length of text in all cells having class="cell" are equal. But, I want to fix the cell width even if the character lengths of contents in class="cell" are different.

Also you can see that the first and last cells have fixed width, in pixels and others cell widths are to be calculated on the basis of percentage .. I want equal width for all cells (except first and last with fixed width in pixels).

I think this can be done using Javascript with the help of jQuery, by calculating the table cell widths on document ready, and then adding some function using on window resize and thereby calculating cell widths. The cell widths will be (tablewidth in px - 60px)/6 I am a beginner and I don't know much.. How can I do this using jQuery and (or) Javascript.

It will be very helpful if someone make me a fiddle..

1. how can we set the width using css or html? 2. how can we do this using javascript/jquery? — Drathier
– Drathier, Commented Jun 19, 2011 at 16:51
You're saying you want every cell to be the same common width (that stretches) and then you're saying you want to fix the cell width. Perhaps you can clarify your requirements. Otherwise, it seems like you should simply set your individual <td> widths using percentages in HTML. — Sparky
– Sparky, Commented Jun 19, 2011 at 16:55

Niklas · Accepted Answer · 2011-06-19 17:46:46Z

3

~~You could just do that with CSS, by applying each td an equal percentage:~~

~~td{ width: 16%; }~~

~~example: http://jsfiddle.net/niklasvh/wKmxD/~~

With your updated question, you could do it with javascript by first storing the widths into an array, and then referencing that on window resize, and use the aspect ratio difference to place new widths:

var w = [];
var tw = $('table').width();
$('table td').width(function(i,e){
    w[i]=e;
});

$(window).resize(function(){
    $('table td').width(function(i){
    return ($('table').width()/tw)*w[i];
    });
});

http://jsfiddle.net/niklasvh/543D9/

edited Jun 19, 2011 at 17:46

answered Jun 19, 2011 at 16:51

Niklas

30k5 gold badges54 silver badges74 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

kojiro Over a year ago

I was about to post almost verbatim the same answer.

Sparky Over a year ago

Six columns at 16% each only adds up to 96%... I don't think the left-over 4% is going to be handled very well cross-browser... (it's really a contradiction since an object is equal to the sum of its parts). Besides, I don't think he's asking for that, otherwise he could have just set his <td> widths in the HTML. On the other hand, I'm not sure I even understand what he's asking.

Alfred Over a year ago

@Niklas.. u have a good logic, but how if I have some tds with specific length in pixels??.. I have re-edited my question to avoid further confusions and you will know what I am trying to say... :)

Niklas Over a year ago

@blasteralfred not working how? It is keeping the aspect ratios of the cells the same

Alfred Over a year ago

hi @Niklas, hav a look @ the fiddle and my updated question :)

|

Collectives™ on Stack Overflow

How to set HTML table cell width using JavaScript and jQuery

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related