表中的width属性不起作用

Question

我的代码是这样的:

<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>

结果是这样的:

我试图在列中添加width = 30%player,但它仍然不起作用.

Answer 1

这是因为你的文字太大使用这可能对你有帮助

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

Answer 2

Moob 在我之前，使用 word-wrap:break-word; 但也可以使用 table-layout:fixed

CSS代码

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