CODEWITHSUNDEEP
javascripthtmlcss
progster
progster

Reputation: 89

resize html table columns (TD)

I have a table as below:

<table>
<tr>
<td>asdf</td>
<td>defg</td>
</tr>
</table>

How can i reduce the width of each column less than length of "asdf" or "defg"

i.e

With above table the column width should be atleast the label (asdf/defg) as below:

asdf|defg

I would like to customize the table display as:

as|defg
df|

i.e the label/content should wraparound if i reduce the column width. Is there any css/html property to implement this. Can anyone please let me know. Thanks.

Upvotes: 1

Views: 4423

Answers (1)

Marcelo
Marcelo

Reputation: 2302

Use word-break:break-all. I tried the following example and worked (at least in Chrome.)

<table>
    <tr>
        <td width="3" style="word-break:break-all;">asdf</td>
        <td>defg</td>
    </tr>
</table>

Upvotes: 3

Related Questions