homepage Welcome to WebmasterWorld Guest from 50.19.172.0
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Set a table columns width
Rain_Lover



 
Msg#: 4427091 posted 6:34 pm on Mar 9, 2012 (gmt 0)

Hi,

I tried to do it by adjusting the <td> width:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Sample Page</title>
<style type="text/css">
div {width:100%; overflow:auto;}
table, td {border:1px solid #000;}
td {width:1000px;}
</style>
</head>
<body>
<div>
<table>
<tr>
<td>First cell</td>
<td>Second cell</td>
<td>Third cell</td>
</tr>
<tr>
<td>Forth cell</td>
<td>Fifth cell</td>
<td>Sixth cell</td>
</tr>
</table>
</div>
</body>
</html>


But it didn't work.

Many thanks for any help!
Mike

 

not2easy

WebmasterWorld Administrator 5+ Year Member Top Contributors Of The Month



 
Msg#: 4427091 posted 7:04 pm on Mar 9, 2012 (gmt 0)

td {width:1000px;}

You have set the <td> width, but 1000px is too wide. What is the purpose of the <div> surrounding the table? Do you want all cells in your table to be the same width? Change it to: td {width:33%;}

birdbrain

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4427091 posted 8:17 pm on Mar 9, 2012 (gmt 0)

Hi there Rain Lover,

if you check the table offsetWidth with javascript, you will see that it has a width of 3022px.

Setting the div container width to 100% is pointless as that is it's default width.

It must be set to the table width.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Sample Page</title>
<style type="text/css">
div {width:3022px;}
table, td {border:1px solid #000;}
td {width:1000px;}
</style>
<script type="text/javascript">


function init(){
alert('overall table width='
+document.getElementsByTagName('table')[0].offsetWidth+'px');
}
window.addEventListener?
window.addEventListener('load',init,false):
window.attachEvent('onload',init);
</script>

</head>
<body>
<div>
<table>
<tr>
<td>First cell</td>
<td>Second cell</td>
<td>Third cell</td>
</tr>
<tr>
<td>Forth cell</td>
<td>Fifth cell</td>
<td>Sixth cell</td>
</tr>
</table>
</div>
</body>
</html>

coothead

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved