html - 表格中的宽度属性不起作用

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>

结果是这样的:

我尝试在 player 列中添加 width=30%，但它仍然不起作用。

Answer 1

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

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