NEO NEO - 3 months ago 16
CSS Question

Set html TD width to number of characters

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.

Answer

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

Comments