How can I get a label in an HtmlTable cell to wrap?

Question

2.00/5 (1 vote)

See more:

I have an HtmlTable cell that I want to be small, width-wise. It has a label "Total Expenses" that I want on two lines, but everything I've tried to force it to wrap has not worked. Here's the html:

HTML

<td width="40" class="skybluebackground centertext"><label class="wrappable">Total Expenses</label></td>

...other rows have cells like this in that column (number input elements):

HTML

<td width="40"><input width="40" type="number" step="0.01" min="0" name="airfareTotalExpense" id="airfareTotalExpense"/></td>

Trying to reduce the width of those number input elements fails, too.

The CSS I've tried:

CSS

.wrappable {
  /*word-wrap: normal;*/
  float:left;
  width: 40px;
}

I tried setting several other properties, too, but obviously nothing worked.

Posted 25-Aug-15 12:40pm

B. Clay Shannon

Updated 25-Aug-15 12:41pm

v2

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Sergey Alexandrovich Kryukov · Answer 1 · 2015-08-25T13:09:00

First of all, you need to understand that, by default, the size of the cell td is defined by its inner HTML. If this is text, it will be wrapped as any other text; you don't need anything except limiting the width of this element, then the inner content will try to fit it. The same goes for label.

With input, however, it won't work, because it is always one-line. Instead of input, you have to use textarea.

In my example below, for illustration, I used td with both limited and default size, and for visibility, added border, padding, and made the table width 100%, so you could see what happens if you change the width of the browser window:

XML

<html>
   <head>
      <style>
         table { width:100%; }
         td { border: solid thin black; padding: 1em; }
         td.wrappable { width: 10em; }
      </style>
   </head>
<body>

<table><tr>
   <td class="wrappable">This text should be wrappable</td>
   <!-- or it can be <label>This text should be wrappable</label> -->
   <td>1.2</td>
</tr>
<tr>
   <td class="wrappable"><textarea>some content</textarea></td>
   <td>2.2</td>
</tr></table>

</body>
</html>

By the way, I strongly advise you to quit the habit of using any style-related attributes except, perhaps, class. Instead, always use CSS. Also, for most applications, relative units, such as "em" are preferable over absolute units (pixels).

The problem is solved.

—SA