<td> tag

  • akaash
  • Beginner
  • Beginner
  • akaash
  • Posts: 62
  • Loc: Gujurat,India

Post 3+ Months Ago

i am having variable length data for one of my <td></td> tags.

when the data is long then the column width of that td tag changes and the table becomes ugly.

what do i have to do to keep the width of the column fixed and if the data increases beyond this width then it should come on new line of that <td> tag?
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

Code: [ Select ]
<td width="100px">content</td>


or

Code: [ Select ]
<td style="width:100px;">content</td>
  • akaash
  • Beginner
  • Beginner
  • akaash
  • Posts: 62
  • Loc: Gujurat,India

Post 3+ Months Ago

no it is not working...
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

what about the other td's in the row:

a) do they have much content
b) do they have fixed widths too?

Also are you using colspans and rowspans?
are you using internet explorer, I have a feeling IE sometimes screws up on td with fixed dimensions, depending on the properties and contents of the other tds.

Can you post a link to anything?
  • akaash
  • Beginner
  • Beginner
  • akaash
  • Posts: 62
  • Loc: Gujurat,India

Post 3+ Months Ago

Code: [ Select ]
<TABLE border="1" align="center" width="75%">
<caption>Present Configuration</caption>
<TR>
    <TD width="15%" class="tableheading">Period</TD>
    <TD width="20%" class="tableheading">Day/Time</TD>
    <TD width="35%" class="tableheading">Users</TD>
    <TD width="10%" class="tableheading">&nbsp;</TD>
</TR>
<TR>
    <TD class="left_panel">Daily</TD>
    <TD class="previous_conf_body">$p_date[0]</TD>
    <TD class="user_names">$p_users[0]<br><input type="text" id="d_users" name="daily_users" width="20"></input></TD>
    <TD class="previous_conf_body"><a href="javascript:popUp('$insert_names_url','names','300','300',4)">Add Users</a></TD>
</TR>
<TR>
    <TD class="left_panel">Weekly</TD>
    <TD class="previous_conf_body">$p_date[1]</TD>
    <TD class="user_names">$p_users[1]<br><input type="text" id="w_users" name="weekly_users" width="20"></input></TD>
    <TD class="previous_conf_body"><a href="javascript:popUp('$insert_names_url','names','300','300',5)">Add Users</a></TD>
</TR>
<br>
<TR>
    <TD class="left_panel">Monthly</TD>
    <TD class="previous_conf_body">$p_date[2]</TD>
    <TD class="user_names">$p_users[2]<br><input type="text" id="m_users" name="monthly_users" width="20"></input></TD>
    <TD class="previous_conf_body"><a href="javascript:popUp('$insert_names_url','names','300','300',6)">Add Users</a></TD>
</TR>
</TABLE>
  1. <TABLE border="1" align="center" width="75%">
  2. <caption>Present Configuration</caption>
  3. <TR>
  4.     <TD width="15%" class="tableheading">Period</TD>
  5.     <TD width="20%" class="tableheading">Day/Time</TD>
  6.     <TD width="35%" class="tableheading">Users</TD>
  7.     <TD width="10%" class="tableheading">&nbsp;</TD>
  8. </TR>
  9. <TR>
  10.     <TD class="left_panel">Daily</TD>
  11.     <TD class="previous_conf_body">$p_date[0]</TD>
  12.     <TD class="user_names">$p_users[0]<br><input type="text" id="d_users" name="daily_users" width="20"></input></TD>
  13.     <TD class="previous_conf_body"><a href="javascript:popUp('$insert_names_url','names','300','300',4)">Add Users</a></TD>
  14. </TR>
  15. <TR>
  16.     <TD class="left_panel">Weekly</TD>
  17.     <TD class="previous_conf_body">$p_date[1]</TD>
  18.     <TD class="user_names">$p_users[1]<br><input type="text" id="w_users" name="weekly_users" width="20"></input></TD>
  19.     <TD class="previous_conf_body"><a href="javascript:popUp('$insert_names_url','names','300','300',5)">Add Users</a></TD>
  20. </TR>
  21. <br>
  22. <TR>
  23.     <TD class="left_panel">Monthly</TD>
  24.     <TD class="previous_conf_body">$p_date[2]</TD>
  25.     <TD class="user_names">$p_users[2]<br><input type="text" id="m_users" name="monthly_users" width="20"></input></TD>
  26.     <TD class="previous_conf_body"><a href="javascript:popUp('$insert_names_url','names','300','300',6)">Add Users</a></TD>
  27. </TR>
  28. </TABLE>


Above is my code where $xyz is variable name

The css for this is as follows:

Code: [ Select ]
<style type="text/css">
<!--
body { 
  font-family: Arial, Helvetica, sans-serif; font-size: 10pt
   }
.tableheading { font-family: Arial, Helvetica, sans-serif; font-size: 10pt; font-weight: bold; background-color: #CCCCFF; text-align: center;}
.left_panel {font-weight: 550; background-color: #CCCCFF; text-align: left; padding-right: 2px; text-align: center;}
.schedule_menu {font-weight: 550; background-color: #DDDCE3; text-align: left; padding-right: 2px;}
.schedule_menu_left_panel {font-family: Arial, Helvetica, sans-serif; font-size: 10pt; font-weight: bold; background-color: #CCCCFF; text-align: left;}
.previous_conf_body {font-weight: 550; background-color: #dddddd; text-align: left; padding-right: 2px;}
A:link  { font-family: Arial, Helvetica, sans-serif; font-size: 10pt; text-decoration: none; color: #000000}
A:visited { font-family: Arial, Helvetica, sans-serif; font-size: 10pt; text-decoration: none; color: #996699}
A:hover  { font-family: Arial, Helvetica, sans-serif; font-size: 10pt; text-decoration: underline; color: #990033}
CAPTION { font-family: Arial, Helvetica, sans-serif; font-size: 16pt; text-decoration: underline; color: #993300}
.user_names {font-family: Arial, Helvetica, sans-serif; font-size: 10pt; text-decoration: none; background-color: #dddddd; color: #000000}

-->
</style>
  1. <style type="text/css">
  2. <!--
  3. body { 
  4.   font-family: Arial, Helvetica, sans-serif; font-size: 10pt
  5.    }
  6. .tableheading { font-family: Arial, Helvetica, sans-serif; font-size: 10pt; font-weight: bold; background-color: #CCCCFF; text-align: center;}
  7. .left_panel {font-weight: 550; background-color: #CCCCFF; text-align: left; padding-right: 2px; text-align: center;}
  8. .schedule_menu {font-weight: 550; background-color: #DDDCE3; text-align: left; padding-right: 2px;}
  9. .schedule_menu_left_panel {font-family: Arial, Helvetica, sans-serif; font-size: 10pt; font-weight: bold; background-color: #CCCCFF; text-align: left;}
  10. .previous_conf_body {font-weight: 550; background-color: #dddddd; text-align: left; padding-right: 2px;}
  11. A:link  { font-family: Arial, Helvetica, sans-serif; font-size: 10pt; text-decoration: none; color: #000000}
  12. A:visited { font-family: Arial, Helvetica, sans-serif; font-size: 10pt; text-decoration: none; color: #996699}
  13. A:hover  { font-family: Arial, Helvetica, sans-serif; font-size: 10pt; text-decoration: underline; color: #990033}
  14. CAPTION { font-family: Arial, Helvetica, sans-serif; font-size: 16pt; text-decoration: underline; color: #993300}
  15. .user_names {font-family: Arial, Helvetica, sans-serif; font-size: 10pt; text-decoration: none; background-color: #dddddd; color: #000000}
  16. -->
  17. </style>
  • gsv2com
  • Professor
  • Professor
  • User avatar
  • Posts: 776
  • Loc: Nippon

Post 3+ Months Ago

One thing you might want to consider is to optimize your css. You might be able to see the problem easier if you do so. For example, take this:

Code: [ Select ]
body { 
  font-family: Arial, Helvetica, sans-serif; font-size: 10pt
   }
.tableheading { font-family: Arial, Helvetica, sans-serif; font-size: 10pt; font-weight: bold; background-color: #CCCCFF; text-align: center;}
.left_panel {font-weight: 550; background-color: #CCCCFF; text-align: left; padding-right: 2px; text-align: center;}
.schedule_menu {font-weight: 550; background-color: #DDDCE3; text-align: left; padding-right: 2px;}
.schedule_menu_left_panel {font-family: Arial, Helvetica, sans-serif; font-size: 10pt; font-weight: bold; background-color: #CCCCFF; text-align: left;}
.previous_conf_body {font-weight: 550; background-color: #dddddd; text-align: left; padding-right: 2px;}
A:link  { font-family: Arial, Helvetica, sans-serif; font-size: 10pt; text-decoration: none; color: #000000}
A:visited { font-family: Arial, Helvetica, sans-serif; font-size: 10pt; text-decoration: none; color: #996699}
A:hover  { font-family: Arial, Helvetica, sans-serif; font-size: 10pt; text-decoration: underline; color: #990033}
CAPTION { font-family: Arial, Helvetica, sans-serif; font-size: 16pt; text-decoration: underline; color: #993300}
.user_names {font-family: Arial, Helvetica, sans-serif; font-size: 10pt; text-decoration: none; background-color: #dddddd; color: #000000}
  1. body { 
  2.   font-family: Arial, Helvetica, sans-serif; font-size: 10pt
  3.    }
  4. .tableheading { font-family: Arial, Helvetica, sans-serif; font-size: 10pt; font-weight: bold; background-color: #CCCCFF; text-align: center;}
  5. .left_panel {font-weight: 550; background-color: #CCCCFF; text-align: left; padding-right: 2px; text-align: center;}
  6. .schedule_menu {font-weight: 550; background-color: #DDDCE3; text-align: left; padding-right: 2px;}
  7. .schedule_menu_left_panel {font-family: Arial, Helvetica, sans-serif; font-size: 10pt; font-weight: bold; background-color: #CCCCFF; text-align: left;}
  8. .previous_conf_body {font-weight: 550; background-color: #dddddd; text-align: left; padding-right: 2px;}
  9. A:link  { font-family: Arial, Helvetica, sans-serif; font-size: 10pt; text-decoration: none; color: #000000}
  10. A:visited { font-family: Arial, Helvetica, sans-serif; font-size: 10pt; text-decoration: none; color: #996699}
  11. A:hover  { font-family: Arial, Helvetica, sans-serif; font-size: 10pt; text-decoration: underline; color: #990033}
  12. CAPTION { font-family: Arial, Helvetica, sans-serif; font-size: 16pt; text-decoration: underline; color: #993300}
  13. .user_names {font-family: Arial, Helvetica, sans-serif; font-size: 10pt; text-decoration: none; background-color: #dddddd; color: #000000}


And create this:

Code: [ Select ]
body{font: 10pt Arial, Helvetica, sans-serif;}
th{background:#ccf;}
.left_panel, .schedule_menu, .previous_conf_body{font-weight: 550;}
.schedule_menu, .schedule_menu_left_panel, .previous_conf_body{text-align:left;}
.schedule_menu, .previous_conf_body, .left_panel{padding-right: 2px;}
.left_panel{background:#ccf; text-align:center;}
.schedule_menu{background:#dddce3;}
.schedule_menu_left_panel{font-weight: bold; background:#ccf;}
.previous_conf_body{background: #ddd;}
A:link, .user_names{color:000;}
A:link{text-decoration:none;}
A:visited{color:#969;}
A:hover{color:#903;}
CAPTION{color: #930;}
.user_names{background:#ddd;}
  1. body{font: 10pt Arial, Helvetica, sans-serif;}
  2. th{background:#ccf;}
  3. .left_panel, .schedule_menu, .previous_conf_body{font-weight: 550;}
  4. .schedule_menu, .schedule_menu_left_panel, .previous_conf_body{text-align:left;}
  5. .schedule_menu, .previous_conf_body, .left_panel{padding-right: 2px;}
  6. .left_panel{background:#ccf; text-align:center;}
  7. .schedule_menu{background:#dddce3;}
  8. .schedule_menu_left_panel{font-weight: bold; background:#ccf;}
  9. .previous_conf_body{background: #ddd;}
  10. A:link, .user_names{color:000;}
  11. A:link{text-decoration:none;}
  12. A:visited{color:#969;}
  13. A:hover{color:#903;}
  14. CAPTION{color: #930;}
  15. .user_names{background:#ddd;}


You should completely eliminate your class of .tableheading as it is entirely not needed due to html's th tag. After cleaning up your code, your solution should be easier to find.

Also, try setting the length of the td that has variable length and not setting the length's of the other td's. This will cause all of the other td's to "go with the flow". But do it in your css, not in your html. You're mixing non-xhtml compliant code with unoptimized css. That, I'm sure, is part of the problem.

Change this:

Code: [ Select ]
<TD width="15%" class="tableheading">Period</TD>
<TD width="20%" class="tableheading">Day/Time</TD>
<TD width="35%" class="tableheading">Users</TD>
<TD width="10%" class="tableheading">&nbsp;</TD>
  1. <TD width="15%" class="tableheading">Period</TD>
  2. <TD width="20%" class="tableheading">Day/Time</TD>
  3. <TD width="35%" class="tableheading">Users</TD>
  4. <TD width="10%" class="tableheading">&nbsp;</TD>


To this:

Code: [ Select ]
<th>Period</th>
<th>Day/Time</th>
<th>Users</th>
<td>&nbsp;</td>
  1. <th>Period</th>
  2. <th>Day/Time</th>
  3. <th>Users</th>
  4. <td>&nbsp;</td>


And give the one you'd like to set the length of an id like this:

Code: [ Select ]
<th id="fixed_length_header">
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

also, when using percentages, I would make them add up to a 100.
15+20+35+10 = 80%, which will probably result in the browser ignoring the widths.

Let all of your widths be automatically calculated except for the one you want to explicitly state a width for.
//sorry thats what gsv just said

Post Information

  • Total Posts in this topic: 7 posts
  • Users browsing this forum: Bogey, Liamw411 and 43 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.