Set html TD width to number of characters

Question

I want to set the TD width to number of characters, for ex, if I set to 11, only 11 characters must be displayed and rest must be in a new row. I tried width property but it displays differently in different browsers/resolutions.

<table border="1">
    <tr>
<td>test1</td>
<td>CRTAX_G</td>
    <td>
    28-FEB-2013, 11-MAR-2013, 13-MAR-2013
    </td>
    </tr>
<tr>
<td>test1</td>
<td>CRTAX_G</td>
    <td>
    28-FEB-2013, 11-MAR-2013, 13-MAR-2013
    </td>
    </tr>
<tr>
<td>test1</td>
<td>CRTAX_G</td>
    <td>
    28-FEB-2013, 04-MAR-2013, 05-MAR-2013, 07-MAR-2013, 11-MAR-2013, 13-MAR-2013, 12-MAR-2013, 08-MAR-2013, 06-MAR-2013
    </td>
    </tr>
<tr>
<td>test1</td>
<td>CRTAX_G</td>
    <td>
    28-FEB-2013, 11-MAR-2013, 13-MAR-2013
    </td>
    </tr>
<tr>
<td>test1</td>
<td>CRTAX_G</td>
    <td>
    28-FEB-2013, 06-MAR-2013, 08-MAR-2013, 12-MAR-2013, 13-MAR-2013, 11-MAR-2013, 07-MAR-2013, 05-MAR-2013, 01-MAR-2013
    </td>
    </tr>
    <table>

which displays the dates in the table in a single line as,

28-FEB-2013, 06-MAR-2013, 08-MAR-2013, 12-MAR-2013,

I want it to be displayed as

   28-FEB-2013,
   11-MAR-2013,
   13-MAR-2013,

every date must be in a new line.

The contents of the TD looks like a list of dates to me. Why not declare a OL or UL and style the items? That way you don't have to treat is as unstructured text, but you create structure and style it. — Kwebble, Mar 14 '13 at 08:32

score 3 · Accepted Answer · answered Mar 14 '13 at 08:31

3

The simplest solution i can imagine is that:

table tr td+td+td {
  font-size: 100%;
  font-family: monospace;
  width: 8em;
}

http://jsbin.com/elaleg/1/edit

answered Mar 14 '13 at 08:31

Saram

1,500
1
18
35

It works. Is there anyway not to use monospace font and get the same result? – NEO Mar 14 '13 at 08:50
I thing that using monospace is obligatory - if you want do it without changing content. – Saram Mar 14 '13 at 08:54
It would seem that em is the height of a character, not the width. You should use ch instead. See the second answer down here: http://stackoverflow.com/questions/8186457/specify-width-in-characters – Joel B Oct 07 '15 at 14:31

score 2 · Answer 2 · answered Mar 14 '13 at 08:27

2

You can wrap your text in tag or anything else with following style:

display: inline-block; width: 11em;

Check JsFiddle

answered Mar 14 '13 at 08:27

Sergio

6,900
5
31
55

score 0 · Answer 3 · answered Mar 14 '13 at 08:27

0

<html>
 <body>
   <table border="1">
    <tr>
        <td style="width:103px;word-wrap:break-word;">28-FEB-2013, 11-MAR-2013, 13-MAR-2013</td>
    </tr>
</table>
 </body>
</html>

Try this, I'm hoping you'll get the solution

answered Mar 14 '13 at 08:27

Ankit Chauhan

384
2
18

score 0 · Answer 4 · edited May 23 '17 at 12:32

0

You can check this

or try css style white- space effectively

white-space: nowrap;

edited May 23 '17 at 12:32

Community

1
1

answered Mar 14 '13 at 08:27

Sandy

2,429
7
33
63

score 0 · Answer 5 · answered Aug 04 '16 at 11:23

here is one solution which worked for me. Assuming that td has a class name (say payerName) specified and the table has an id (say sortable).

$(".payerName").css({"white-space":"nowrap"});
$(".payerName").css({"overflow":"hidden"});
$(".payerName").css({"text-overflow":"ellipsis"});
$("#sortable").css("table-layout","fixed");

This is a set of steps you can use to avoid long length strings into the td. the ellipsis property will add a '...' at the end of the string/value. You can add the title attribute so that it displays the actual value when mouse is hover.

Hope this helps!

Set html TD width to number of characters

5 Answers5