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, Commented Nov 20, 2015 at 8:15
stackoverflow.com/questions/1258416/word-wrap-in-an-html-table — Tim Sheehan, Commented Nov 20, 2015 at 8:16

Anubhav pun · Accepted Answer · 2015-11-20 08:16:13Z

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, 2015 at 8:16

Anubhav pun

1,3232 gold badges8 silver badges21 bronze badges

Add a comment |

lordkain · Accepted Answer · 2015-11-20 08:16:27Z

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, 2015 at 8:16

lordkain

3,1191 gold badge15 silver badges18 bronze badges

Add a comment |

Sinister Beard · Accepted Answer · 2015-11-20 08:18:07Z

1

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.

answered Nov 20, 2015 at 8:18

Sinister Beard

3,68014 gold badges64 silver badges99 bronze badges

Add a comment |

Collectives™ on Stack Overflow

width attribute in table not working

3 Answers 3

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Linked

Related