[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1573
  • Last Modified:

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
0
minnirok
Asked:
minnirok
  • 4
  • 3
  • 3
  • +1
1 Solution
 
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
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
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
 
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

Featured Post

Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

  • 4
  • 3
  • 3
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now