hey folks, i got this table but its widths are being ingored by the text. the larger the text it the longer the th or td goes. i cant wrap it around its cell
Sure thing. This sample code takes you through some of the differences.
<style type="text/css">
body { margin: 0; }
#group { float: left; margin: 1em; width: 30em; }
table { margin: 1em; }
tr { height: 1.5em; }
th { border: 1px solid black; }
</style>
<div id="group">
<h2>No content at 50, 5 and 20</h2>
<table class="content" cellpadding="0" cellspacing="0">
<tr>
<th width="50"></th>
<th width="5"></th>
<th width="20"></th>
</tr>
</table>
<p>The pixel width of each column is very narrow.</p>
<h2>With content at 50, 5 and 20</h2>
<table class="content" cellpadding="0" cellspacing="0">
<tr>
<th width="50">ALPHAALPHAALPHAALPHA</th>
<th width="5">Name</th>
<th width="20">Ack</th>
</tr>
</table>
<p>The table cell attempts to be as small as it was above, but the minimum size for a cell is forced larger to the size of the largest word within it.</p>
<h2>With small word content at 50, 5 and 20</h2>
<table class="content" cellpadding="0" cellspacing="0">
<tr>
<th width="50">ALPHA ALPHA ALPHA ALPHA</th>
<th width="5">Name</th>
<th width="20">Ack</th>
</tr>
</table>
<p>With smaller words, the table size attempts to return back to the narrow width it was set to.</p>
</div>
<div id="group">
<h2>No content at widths 250, 25 and 100</h2>
<table class="content" cellpadding="0" cellspacing="0">
<tr>
<th width="250"></th>
<th width="25"></th>
<th width="100"></th>
</tr>
</table>
<p>These cells even with no content, have the width that they are set at.</p>
<h2>No content at widths 50, 5 and 20</h2>
<table class="content" cellpadding="0" cellspacing="0">
<tr>
<th width="250">ALPHAALPHAALPHAALPHA</th>
<th width="25">Name</th>
<th width="100">Ack</th>
</tr>
</table>
<p>When the content is larger than the cell, such as in the central column, the cell grows to the width of the largest word.</p>
</div>
as a test i took “WWW” coz its the most widest alphabet that can take space. if u run that code. the cell in which it has wwww will push the cell out. ignoring the 100 width that is given. that is my problem. having no text wrapped around cell respective of its width
is there a way that i can not wrap text and keep it in cell even if its larger then the cell size.like i don’t want my cell data to be wrapped and also show in same line.
btw - if a sentence has 20 character. how long would its width would be?:goof:
Your text is already staying in one cell which is why it pushes it wide. That’s how tables work and they will always honour content rather than widths.
I’ve given you code to allow the text to wrap, and Paul had given code to hide the overflow so I don’t see what other options there could be.
If you don’t want the text to wrap and you don’t want the cell to be pushed wide then what else can happen to it? The content has to be accounted for somewhere.
Perhaps a diagram of the result you want would help but I think we have probably covered all bases already
if a sentence has 20 character. how long would its width would be?:goof:
How long is a piece of string:)
It depends on the font-size, the browser, the platform, the styles of the text (bold or italic), the font used and the letter spacing and probably some other things I forgot.
You could probably work it out roughly within about 20px but then someone could resize the text in the browsers and that would make nonsense of it all. The fact that you are trying to something like that means that you are probably doing it wrong from the start.
oh my box and my dumb colleagues they are just asking stupid things. ofcourse u can’t make a sentence in one line having its width’s with is less. stupid people. but thanks paul
