表中的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>

结果如下：

我尝试在player列中添加width = 30％，但它仍无效。

Answer 1

因为你的文字太大了 用这个可以帮到你

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

Answer 2

Moob在我面前，使用自动换行：break-word;还要使用table-layout：fixed

css代码

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

Answer 3

那是因为“HazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazard”正在伸展它。

表格细胞将伸展以适应其含量，如果它们不能断裂，它们将保持伸展。

如果是“危险危险......”等空格，它会像预期的那样破裂。如果在表格单元格中放置一个大图像，也会发生同样的情况。