prevent word wrap in table

Hi,

What can I do to prevent word wrapping in a table? I have something like:

<div>
    <table>
        <etc..>
    </table>
</div>

I'd just like the text in each row of my table to not word wrap - its ok if the contents get cut off by the parent div.

Thanks
LVL 7
minnirokAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

mattisflonesCommented:
Something like this: <div style="overflow: hidden; width:200px;"> might work...
0
mattisflonesCommented:
But why use tables? Its much easier to control with only divs..
0
minnirokAuthor Commented:
Hii mattisflones,

I have a pre-existing table control, so I just wanted to make sure that each row in the table maintains the same exact height - right now if the text is long in one cell it wraps and increases the height of that row, makes it look a little silly.

I'd like to just let the long text get cut off and keep each row the same height.

Thanks
0
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

bubbledragonCommented:
You want same height of rows on your table? Try javascript.

<table id="table1" width="100" border="1" style="tableLayout:fixed;">
<tr><td>0123456789 0123456789 0123456789 0123456789 0123456789 0123456789 </td></tr>
<tr><td>0123456789 </td></tr>
</table>

<script>
function sameHeight() {
      var dt = document.getElementById('table1');
      var maxheight = 0;
      for (i=0;i<dt.rows.length;i++) {
            maxheight = (maxheight < dt.rows(i).offsetHeight)?dt.rows(i).offsetHeight : maxheight;
      }
      for (i=0;i<dt.rows.length;i++) {
            dt.rows(i).style.height = maxheight;
      }
}
</script>
0
KennyTMCommented:
Use the "nowrap" attribute on <td>'s

<td nowrap="nowrap">

or use the CSS property white-space: nowrap;

<td style="white-space: nowrap;">

This will not cut-off the text, however.
0
minnirokAuthor Commented:
Hi guys,

I'm not sure if I'm doing it right - I have a table and I add rows to it dyamically like:

function AddRow()
{
    var tbl = document.getElementById('my_table');
    var row = tbl.tBodies[0].insertRow(next_row_idx);

    var cell0 = row.insertCell(0);
    var textNode0 = document.createTextNode("really really really long text");
    cell0.appendChild(textNode0);
}

Yeah so I tried:

    cell0.nowrap = "nowrap";
    cell0.white-space = "nowrap";

I guess that's not the way to do it since it keeps failing.

Where should I put those calls?

Thanks

0
KennyTMCommented:
In Javascript the codes are

cell0.noWrap = true;

or

cell0.style.whiteSpace = "nowrap";
0
minnirokAuthor Commented:
Arghh still not working for me - any other things I could be doing wrong?

I tried both:

cell0.noWrap = true;
cell0.style.whiteSpace = "nowrap";

but the longer text is still wrapping - my table is defined like:

<table border="1" cellspacing="0" id="tblSample" style="position:absolute; left:200px; top:200px">

<col style="width: 20px;  background-color: yellow; font-size:12px; font-family:arial;"></col>
<col style="width: 50px;  background-color: yellow; font-size:12px; font-family:arial;"></col>
<col style="width: 100px; background-color: aqua;   font-size:12px; font-family:arial;"></col>

  <thead>
  <tr>
    <th></th><th>Column1</th><th>Column2</th><th>Column3</th><th>I</th>
  </tr>
  </thead>
  <tbody></tbody>
</table>

Anything wrong with that?
0
KennyTMCommented:
Hmm. It seems to be the problem of IE.

Try this instead. I wrapped the long text by a <nobr> which disable wrapping.

function AddRow()
{
    var tbl = document.getElementById('my_table');
    var row = tbl.tBodies[0].insertRow(-1);

    var cell0 = row.insertCell(0);
    var nobr = document.createElement('nobr');
    var textNode0 = document.createTextNode("really really really long text shflsdfjl gn9w84 b948w bneargni aegniqmtmt0 3m0t30tm9vmotgmw3m t803tcv3t8mvp0w6kp356kbv0 ymv03t80wvm 03vtmv0wtm w06 n0b9my04m 40yvf8v 4y5nub- 45y-b -45ym8 -764 e5b 9hn74590bno yl4mugovl5myuognuvl uagp;w34o659pbm6 peryopb47ye58g-hy");
    nobr.appendChild(textNode0);
    cell0.appendChild(nobr);
}

----

However, the above code will not cut the text off, and for really long text like above the page will become very wide and ugly. Also <nobr> is non-standard. I'd propose this instead:

<style>
.no_wrap {
      width: 20em; /* change to an appropriate width */
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
}
</style>
...
function AddRow() {
    var tbl = document.getElementById('my_table');
    var row = tbl.tBodies[0].insertRow(-1);

    var cell0 = row.insertCell(0);
    var nobr = document.createElement('div');
    nobr.className = "no_wrap";
    var textNode0 = document.createTextNode("really really really long text shflsdfjl gn9w84 b948w bneargni aegniqmtmt0 3m0t30tm9vmotgmw3m t803tcv3t8mvp0w6kp356kbv0 ymv03t80wvm 03vtmv0wtm w06 n0b9my04m 40yvf8v 4y5nub- 45y-b -45ym8 -764 e5b 9hn74590bno yl4mugovl5myuognuvl uagp;w34o659pbm6 peryopb47ye58g-hy");
    nobr.appendChild(textNode0);
    cell0.appendChild(nobr);
}

Note that the "text-overflow" property is non-standard. This adds a "..." after when the text is too long, but for IE only.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
mattisflonesCommented:
>I have a pre-existing table control,

If i where you i would change the control to a divcontrol.. I left tables a while ago, and will never use them again if i can avoid it.
It seems like browsers respond to divs in a much better way, for now atleast.

But hey... good luck! :-)
0
minnirokAuthor Commented:
Hi,

KennyTM , I will give that a try.

mattisflones, again, what do you mean by move to divs instead of tables? How could I create a table-like control just using divs?

Thanks
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.