volitics Posted April 6, 2007 Share Posted April 6, 2007 Hello;I am setting the width of table cells using JavaScript. I am setting the padding of table cells using CSS.I have got a table with one row and two cells. The table has a width of 450 pixels. The cell on the left has a width of 50 pixels. The cell on the right has a width of 400 pixels. Adding the cell widths together equals the 450 pixel table width.Here's what the table looks like without any cell padding: <head><script type="text/javascript">function setWidth() { document.getElementById('cell01').width="50px"; document.getElementById('cell02').width="400px"; } </script></head><body onload="setWidth()"><table width="450"> <tr> <td id="cell01"> </td> // This cell has a width of 50 pixels. <td id="cell02"> </td> // This cell has a width of 400 pixels. </tr></table> The problem I am trying to figure out is this: If I pad the left table cell by 25 pixels do I need to subtract the 25 pixel cell padding from the 50 pixel width of the left table cell or the 400 width of the right table cell in order to keep the table at a 450px width?The table below shows the table with the 25px left cell padding: <head><script type="text/javascript">function setWidth() { document.getElementById('cell01').width="50px"; document.getElementById('cell02').width="400px"; } </script></head>// If I add together the cell widths plus the cellpadding width it equals more than the 450px table width.// Calculation: left cell, 50px plus right cell, 400 px, plus cellpadding 25 px = 475 px<body onload="setWidth()"><table width="450"> <tr>// Do I need to subtract the 25px cell padding from the 50px or// the 400px cell widths specified in the JavaScript cell widths. <td id="cell01" style="padding-left: 25px"> </td> <td id="cell02"> </td> </tr></table> Thanks. Link to comment Share on other sites More sharing options...
pulpfiction Posted April 6, 2007 Share Posted April 6, 2007 Width of the table remains 450px in both cases. When you add padding then its added to the width mentioned by javascript and left cell width will be 50 [width] + 25 [padding] = 75px. this will reduce the width of the second cell to 375px.So subtract padding 25px from width 50px for the 2nd cell to be 400px. Link to comment Share on other sites More sharing options...
volitics Posted April 6, 2007 Author Share Posted April 6, 2007 pulpfiction;Thanks for the help. Link to comment Share on other sites More sharing options...
volitics Posted May 13, 2007 Author Share Posted May 13, 2007 I'm thinking about scrapping the JavaScript method for setting the cell widths and using CSS instead.My question is which is the best way of setting column widths - JavaScript or CSS?It looks the CSS method is the best method because of its simplicity. But I'm not sure if CSS is the overall best method rather than JavaScript.In the example below I have got the first column set to a width of 50 pixels and the second column set to a width of 400 pixels. The table has a width of 450 pixels just like the JavaScript example above.If I add a 25px padding to the first column it seems to automatically subtract the 25 pixels from the 400 pixel width specified for the second column.I've been tinkering with the CSS method. If I specify or change the cell padding and then set the cell widths using CSS it looks exactly the same in the browser window as with the identical settings using JavaScript. <head><style type="text/css">td.col01{width: 50px;}td.col02{width: 400px;}</style></head><body><table width="450"> <tr> // If I add a 25px padding here it seems to narrow // the width of the second column by 25px. <td class="col01" style="padding-left: 25px"> </td> <td class="col02"> </td> </tr></table> I would appreciate any input or opinions.Thanks. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now