Long text displayed properly in but not in

Question

I have a table which display information from a database. The problem is that if I display a long text inside <td></td> then, it is displayed properly and the cell is expanded according to size but when the same text is displayed inside an input tag then, neither the cell nor the input is expanded to accommodate whole text.

I had tried setting width="100%" it expands the text little bit but still i have to scroll along the text box to see rest of text .

Here is the Example

 <table cellspacing="8" cellpadding="2" border="0" bgcolor="#00eeee">
   .
   .
  <tr>
     <td>HELLO THIS IS ME INSIDE THIS CELL</td>

    .
    .
    .

     <td><input type="text" name="myname" style="width:100%; border: 0; background: transparent; text-align: center;" value="HELLO THIS IS ME INSIDE THIS CELL"/>
      </td>
   </tr>

  </table>

Output:

Col1        Col2                                Col3        Col4        Col5

XYZ         HELLO THIS IS ME INSIDE THIS CELL   PQR         STU         HELLO THIS IS

EDIT

I have already came across-ed this question Text input with 100% width inside a td expands/continues outside the td. It is about text overflow outside <td> but mine deals with text hiding of input element.

Setting the width of both input and table to 100% solves the problem. But, I don't want to set the table width="100%" because it hampers my UI design. Also <td width="30%"> does the trick for that particular column but i don't want to set it manually, it should be done automatically.

so if there is any way to resize td automatically as per input element content than that will surely do the trick. So please help me out.

Thanks

style="border: 0; width="100%" background: transparent; text-align: center;"? — Dmitriy, May 13 '15 at 05:06
If you are using multiple columns set the td width and then stretch the input to 100% — ASR, May 13 '15 at 05:10
@ASR td automatically expands as per the width of text but input doesn't even after setting the width of input to 100%. The width of td are automatically set as per content hence if i increase it a particular column width than the rest of columns will be affected. — geeksal, May 13 '15 at 05:22
possible duplicate of [Text input with 100% width inside a td expands/continues outside the td](http://stackoverflow.com/questions/7525675/text-input-with-100-width-inside-a-td-expands-continues-outside-the-td) — Dhwani, May 13 '15 at 05:45
@dotNetAddict I have spent almost 4-5 hours approx searching for the answer. Even i have posted another query by the means of which i have found out that there is no way out except three solutions. 1. use textarea so data can be displayed on multi-line 2. set width of td manually and width of input as 100% 3. set width of table and input to 100%. Among this 2 & 3 are not desirable as they hamper my ui design. Hence only 1 option is left. However if you have a solution than post it. I will look into it. — geeksal, May 14 '15 at 06:49

Dhwani · Answer 1 · 2015-05-13T06:38:55.817

1

Here is code and fiddle.

HTML

<table cellspacing="8" cellpadding="2">
    <tr>
     <td>HELLO THIS IS ME INSIDE THIS CELL</td>
     <td style="width:100%">
         <input type="text" name="myname"  value="HELLO THIS IS ME INSIDE THIS CELL" size="50"/>
      </td>
        <td>HELLO THIS IS ME INSIDE THIS CELL</td>
   </tr>

  </table>

CSS

table{
    width: 100%;
    background-color:#00eeee;
    border:0;
    display:block;
    overflow:auto;
}

input{
    width:initial; 
    background: transparent; 
    text-align: center;
    border: 0; 
}

edited May 13 '15 at 06:38

answered May 13 '15 at 05:11

Dhwani

7,484
17
78
139

both the text is in same row. – geeksal May 13 '15 at 05:45
yeah it will work for two columns but not for five or more columns. See the question about the output i am getting. I had tried your solution but of no use. The only thing which is working is manually setting the width of td which should be done automatically because the data is fetched from database and i don't know of what length it would be. – geeksal May 13 '15 at 05:53
@geeksal in that case, don't u think if text is 1000 characters long it will spoil your UI? I think you should take textarea. – Dhwani May 13 '15 at 06:03
It is not 1000 char long. It would be not more than 50 characters. Also i don't want to set table width=100% since it is should expand and contract automatically. – geeksal May 13 '15 at 06:25
that is not an issue columns are 5 only. so just find out how to resize td automatically. – geeksal May 13 '15 at 06:29

ASR · Accepted Answer · 2015-05-13T06:50:14.803

1

Fix your style like this style="border: 0; width:100%; background: transparent; text-align: center;"

Check these fiddles one with fixed td width and other without. http://jsfiddle.net/a4vrwrrw/1/ and http://jsfiddle.net/s3vtgz7q/1/

Edit

Try using textarea instead of input - jsfiddle.net/s3vtgz7q/5

edited May 13 '15 at 06:50

answered May 13 '15 at 05:45

ASR

1,801
5
25
33

I want the width to be automatic for table as well as cell. Input width=100% helps but td is not automatically resized if table width is not set to 100% – geeksal May 13 '15 at 06:25
I don't think you can achieve this without a fixed with of td. If you are free to use textarea instead of input then this will help - http://jsfiddle.net/s3vtgz7q/5/ – ASR May 13 '15 at 06:33
After searching for hours I found that the table does not work as intended by me. Hence the only solution remains is to use textarea. I had modified your code a see this: http://jsfiddle.net/s3vtgz7q/8/ - This produce the intended results. Thanks for help. – geeksal May 13 '15 at 10:51

score 0 · Answer 3 · answered May 13 '15 at 05:08

0

Try to make width 100% for your table.Set width for <td> also

<table cellspacing="8" cellpadding="2" border="0" bgcolor="#00eeee" style="width:100%">

answered May 13 '15 at 05:08

Techy

2,626
7
41
88

setting of width of td manually solves the problem but it should be done automatically. So if you can upgrade your answer than that will be very helpful. – geeksal May 13 '15 at 05:38

score 0 · Answer 4 · answered May 13 '15 at 06:05

0

Try this way to solve this problem But this is not proper way.

I will try to fulfil :)

jsFiddle

answered May 13 '15 at 06:05

Nandhakumar

366
2
9

Long text displayed properly in but not in

4 Answers4