Dynamically change table height

Question

I'm facing problem with table in html, actually I fixed the width,and want to increase the td height as per the content in it, for example : if td width is 30px and when data inside td crosses the td width i want to show remaining data in next line and so on..

table:

<table width="100%" border="1" >
        <tr>
            <td align="left" width="30px">
                laaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa text
        </td>
            <td align="left" width="30px">
                text
        </td>
        </tr>
      </table>

Did you try applying the `overflow: auto` CSS tag to your tds? — , Jan 05 '13 at 18:28
You should check out the css property word-breakfor tables. I think it is what you are looking for. Here is a link to W3Schools about it: http://www.w3schools.com/cssref/css3_pr_word-break.asp — Mike, Jan 05 '13 at 18:30
place the code ` style="overflow:auto"` in your td. Try that. (BTW this implementation of CSS, inline stylesheets, is not the best, you should try using more of external stylesheets. Though this is easier for people just starting to learn CSS. You should look up CSS.) — , Jan 05 '13 at 18:31
@Mike word-break breaks in the middle of words, unlike `overflow:auto`, which avoids this. Maybe that's what the OP wants, though... — , Jan 05 '13 at 18:33
Mike's answer applies if you want it to make a new line, even in the middle of words. If that's what you want, sure. `overflow:auto`, I believe only goes to the new line when there's a new word. — , Jan 05 '13 at 18:34

score 2 · Accepted Answer · edited May 23 '17 at 12:19

2

Here is the solution to your problem! The width of the columns are equal in this case, though they can be changed, not to mention.

<table  border="1" width="100%" style="table-layout:fixed">
<tr>
<td style="word-wrap:break-word">Hellohellohellohellohellohellohellohellohellohellohello
<td>text</td>
</tr>
</table>

And here is the demo http://jsbin.com/ihaxob/2/edit .. I have seen the solution from this thread!

Word-wrap in an HTML table

edited May 23 '17 at 12:19

Community

1
1

answered Jan 05 '13 at 19:16

Sumit Gera

1,249
4
18
34

give the widths in percentages. – Sumit Gera Jan 06 '13 at 06:39
given widths in % only, working in jsbin but not working in local .. my case is different here .. i'm dynamically loading the table content using AJAX call – S B Jan 06 '13 at 06:42
Sorry but I don't know much of AJAX. – Sumit Gera Jan 06 '13 at 06:48
I suggest you to modify the question since this ( the answer ) answers your question but doesn't solves your problem. – Sumit Gera Jan 06 '13 at 08:01
I still recommend you to modify the problem so that you can get correct answer to your problem. – Sumit Gera Jan 06 '13 at 12:18

Dynamically change table height

1 Answers1