Question

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.

Answer 1

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>