如何固定td的宽度？td设置固定宽度后不生效该如何解决

问题原因 #

HTML 表格默认使用table-layout: auto自动布局规则，该模式下单元格宽度会优先匹配内容的实际尺寸，你给<td>设置的100px宽度优先级低于内容撑开的宽度，所以限制不生效；高度限制在自动布局模式下优先级更高，所以能正常生效。

修复方案 #

你可以任选以下一种方案修改：

1. 给表格添加table-layout: fixed属性，开启固定布局模式，该模式下你给<td>设置的宽高会优先生效，不会被内容撑开，修改后的完整代码如下：

<table style="background: green; table-layout: fixed;">
    <tr>
        <td style="width: 100px; height: 50px;">
            <div style="width: 100%; height: 100%; overflow: hidden;">
                <img src="mylogo.png" width="177" height="71">
            </div>
        </td>
    </tr>
</table>

2. 不需要修改表格布局，直接给<td>内的包裹div显式设置固定宽度：

<div style="width: 100px; height: 100%; overflow: hidden;">

额外说明：你原有代码中div同时设置了overflow: hidden和overflow-x: hidden，属于冗余配置，保留一个即可。

内容的提问来源于stack exchange，提问作者Userx10xC