width attribute in table not working

Question

My code is this :

<div style="width: 300px;">
    <table width="100%" border="2px solid blue">
        <tr>
            <td style="width:30%">Player</td>
            <td style="width:30%">Club</td>
            <td style="width:30%">Country</td>
        </tr>
        <tr>
            <td style="width:30%">HazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazard</td>
            <td style="width:30%">Chelsea</td>
            <td style="width:30%">Belgium</td>
        </tr>
        <tr>
            <td>Ronaldo</td>
            <td>Real Madrid</td>
            <td>Portugal</td>
        </tr>
        <tr>
            <td>Messi</td>
            <td>Barcelona</td>
            <td>Argentina</td>
        </tr>
    </table>
</div>

The result is this :

I tried to add width=30% in the column player, but it's still not working.

The cell is held open by your extremely long word as it has nowhere to break. In a real-world case your table would probably be fine but if you need to force a ridiculously long word to wrap you can use `word-wrap:break-word;` — Moob, Nov 20 '15 at 08:15
http://stackoverflow.com/questions/1258416/word-wrap-in-an-html-table — Tim Sheehan, Nov 20 '15 at 08:16

score 7 · Answer 1 · answered Nov 20 '15 at 08:16

7

it's beacause your text is too large use this may help you

<style>
table tr td
{
  word-break: break-all;
  }
</style>

answered Nov 20 '15 at 08:16

Anubhav pun

1,323
2
8
20

score 5 · Answer 2 · answered Nov 20 '15 at 08:16

5

Moob was before me, use word-wrap:break-word; but also use table-layout:fixed

css code

table{
    table-layout: fixed;
}
td {
    word-wrap:break-word;
}

answered Nov 20 '15 at 08:16

lordkain

3,061
1
13
18

score 1 · Answer 3 · answered Nov 20 '15 at 08:18

That's because "HazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazard" is stretching it.

Table cells will stretch to fit their content, and if they can't break, they will keep stretching.

If it was "Hazard hazard..." etc with spaces, it would break as expected. The same would happen if you put a large image in the table cell.

width attribute in table not working

3 Answers3