prevent word wrap in table

Something like this: <div style="overflow: hidden; width:200px;"> might work...

But why use tables? Its much easier to control with only divs..

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

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>

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.

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

In Javascript the codes are

cell0.noWrap = true;

or

cell0.style.whiteSpace = "nowrap";

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?

>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! :-)

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