Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

width of <TD>

Posted on 2001-08-19
13
Medium Priority
?
605 Views
Last Modified: 2012-08-13
I am generating html using XSL, the problem is that when i get very long text data that cannot be wrapped then the cell is being widen as the text width and then all table is messed.
is there a way in html to force text to be broken, I want the td cells to be fixed width no metter what data needs to be put inside.
0
Comment
Question by:yossim111799
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
  • 3
  • +4
13 Comments
 
LVL 15

Accepted Solution

by:
a.marsh earned 136 total points
ID: 6403317
The simplest way to resolve this is to "break" the data up by adding spaces - otherwise the browser will not wrap it as you have already found out.

Is this a feasible option for you?

:o)

Ant
0
 
LVL 6

Expert Comment

by:Triskelion
ID: 6403595
Is it possible for you to use a text edit box to display the data in the table?

That way, the data would truncate, but the users can still scroll to see the rest of the data.

<HTML>
<HEAD>
<TITLE>Width Test</TITLE>
</HEAD>
<BODY>
<table border=5>
     <tr>
          <td width=12 height=10>
          This is a test of_the_emergency_width_system
          </td>
          <td>ASDF</td>
     </tr>
     <tr>
          <td>ASDF</td>
          <td width=12 height=10>
          <input type=text
               value='This is a test of_the_emergency_width_system'>
          </input>
          </td>
     </tr>
</table>
</BODY>
</HTML>
0
 
LVL 6

Expert Comment

by:Triskelion
ID: 6403705
Or maybe you can put the text into a string, truncate the string based on the width of the cell, then put it into the cell.
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:yossim111799
ID: 6403733
In order to break the string I need to put space in the n character and I dont know how many characters are entered in x width.
so I can only put some fixed number to be truncated.
Is this what you meant , to calculate the number of character that can be enetred in this width and then always truncate according to this number ?




0
 
LVL 6

Expert Comment

by:Triskelion
ID: 6403739
Yes, truncate at a fixed number.

What do you think about the edit box idea?
0
 

Author Comment

by:yossim111799
ID: 6403751
the edit box is not good for me.
there is no other way in html to force the width of the cell on the text ?
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 6403841
I can give you an IE5+ only solution:

in the head:

<style>
   table {table-layout:fixed}
<style>

then on the cells that are a problem:

<td style="width:60;overflow-x:auto">


the overflow-x will cause the cell to be scrollable when the data is
to wide by adding scroll bars.  

If you jsut want to truncate the date use overflow-x:hidden instead.

As I said it's IE5+ only in Netscrap you are out of luck.

Cd&
0
 
LVL 51

Expert Comment

by:ahoffmann
ID: 6404493
If you don't mind fixed width table columns:
not nice, not performant, not in the idea of HTML, but works on all browsers ('till memory overflow).

<table border="1" width="80%">
    <tr>
         <td><table border="0" width="200">
                <tr> <td></td> </tr>
             </table>
         </td>
         <td><table border="0" width="100">
                <tr> <td></td> </tr>
             </table>
         </td>
         <td width=100%><td></td>
    </tr>
</table>
0
 

Author Comment

by:yossim111799
ID: 6406027
Sorry , but it seem there is no solution in html to my problem.
0
 
LVL 49

Expert Comment

by:DanRollins
ID: 7085452
Hi yossim,
You've requested to delete this question, but its status remains as 'Pending Delete' because one or more comments have been added.  Normally, the only way to fully delete such a Question is to post a message to Community Support and ask for assistance.

EE is making a one-time database sweep to purge the Pending Delete Questions automatically.  During this sweep:

    yossim -- To allow the deletion to proceed:  Do nothing.
    EXPERTS -- Please DON'T POST a comment except to contest this deletion.

In the future, please refer to http://www.experts-exchange.com/jsp/cmtyHelpDesk.jsp#8 for instruction on deleting questions.

DanRollins -- EE database cleanup volunteer
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 7087963
I should not be deleted.  

All he workarounds were given. The comments of a.marsh, ahoffmann, and me are all valid.  The experts are not responsible for the limits of HTML within current browsers.

Cd&
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 7101089
It is time to clean this abandoned question up.  

I am putting it on a clean up list for CS.

<recommendation>
split COBOLdinosaur, a.marsh, and ahoffmann

</recommendation>

If anyone participating in the Q disagrees with the recommendation,
please leave a comment for the mods.

Cd&
0
 
LVL 5

Expert Comment

by:Netminder
ID: 7102469
Per recommendation, force-accepted.

Netminder
CS Moderator

COBOLdinosaur: points for you at http://www.experts-exchange.com/jsp/qShow.jsp?ta=html&qid=20315290
ahoffmann: points for you at http://www.experts-exchange.com/jsp/qShow.jsp?ta=html&qid=20315291
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

715 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question