为何设置width和max-width为50px的<td>块宽度仍超出？（Django模板场景）

嘿，我来帮你搞定这个表格宽度的问题！你遇到的情况是典型的HTML表格自动布局导致的宽度设置被忽略——默认情况下，浏览器会根据表格内容自动调整单元格宽度，哪怕你给<td>设了固定宽也没用。结合你不能用媒体查询和类的限制，给你两个直接的内联样式解决方案：

第一步：给表格开启固定布局模式 #

在表格的style属性里加上table-layout: fixed，这会让浏览器严格按照你定义的单元格宽度来渲染，不再自适应内容。修改后的表格标签是这样的：

<table style="width: 84%; min-width: 330px; margin-left: 8%; margin-top: 20px; margin-right: 8%; table-layout: fixed;" cellpadding="0" cellspacing="0">

第二步：确保图片不会撑开单元格 #

虽然你给图片设了width:50px，但有时候图片的默认行内元素特性可能会带来额外的间距，所以给图片加个display: block和max-width: 100%，让它完全贴合单元格宽度：

<img style="width: 50px; background: red; display: block; max-width: 100%;" src="https://s3.amazonaws.com/co.psngr.gopublic.staging/media/product/1/fbb3f543c5c349b09b59bf19a1e6a6d9.png">

完整修改后的代码 #

<table style="width: 84%; min-width: 330px; margin-left: 8%; margin-top: 20px; margin-right: 8%; table-layout: fixed;" cellpadding="0" cellspacing="0">
  <tr>
    <td style="width: 50px; border-top: solid 1px #dedede; background: yellow; max-width: 50px;">
      <img style="width: 50px; background: red; display: block; max-width: 100%;" src="https://s3.amazonaws.com/co.psngr.gopublic.staging/media/product/1/fbb3f543c5c349b09b59bf19a1e6a6d9.png">
    </td>
    <td colspan="1" style="border-top: solid 1px #dedede; padding: 20px 10px; text-align: left; word-wrap: break-word; font-family: 'Lato', sans-serif; font-size: 16px;color: #333333; width: 50%;">
      <b><span style="color: #24b646">3 x </span>Psngr Beacon</b><br/>
      <span style="font-size: 14px; color: #899ba7;">Bluetooth 4 (BLE) USB iBeacon™</span>
    </td>
    <td style=" width: 100px; text-align: right; border-top: solid 1px #dedede; padding: 20px 0px; font-weight: bold; color: #24b646; font-family: 'Lato', sans-serif; font-size: 18px; letter-spacing: 0.2px; word-wrap: break-word">
      € 74.85
    </td>
  </tr>
</table>

这样改完之后，那个黄色背景的<td>就会牢牢保持50px的宽度，不会被其他内容撑开啦。你之前设置的word-wrap: break-word也能继续发挥作用，确保第二个单元格的长文本不会乱布局～

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