CSS width属性失效：表格单元格总宽90%未达预期显示效果

嘿，这个问题我太熟悉啦！你遇到的核心问题是表格的默认布局行为导致的，我来给你拆解一下：

问题原因 #

HTML表格默认的table-layout属性是auto，这种模式下表格会根据内容自动收缩宽度，而不是继承父容器的宽度。你给每个td设置30%的宽度，这个百分比是相对于表格自身的宽度，而不是页面宽度。因为表格本身没被设置宽度，它只会缩到刚好容纳内容的大小，所以三个30%加起来自然远小于页面的一半。

当你把三个td的宽度总和设为100%时，表格会被td撑开到适应父容器的宽度（或者内容的最大宽度），所以百分比设置才会生效。

解决方案 #

要实现三个td总宽度占页面90%的效果，你需要两步操作：

• 给表格本身设置width: 90%，让表格整体占页面宽度的90%
• 保持每个td的30%宽度（或者调整为33.33%来平分表格的90%宽度，看你的需求）
• 可选添加table-layout: fixed，让表格布局更稳定，避免内容撑开单元格宽度

修改后的代码 #

CSS 部分

#flexing .welcome .note { padding-bottom: 0; }
#flexing .welcome .checkout { margin:10px; }
#flexing .welcome .cart a { color:white; text-decoration: none; font-size:15.5px; }
/* 新增表格宽度设置 */
#flexing .welcome table {
  width: 90%; /* 表格整体占页面90%宽度 */
  table-layout: fixed; /* 固定布局，确保td宽度严格生效 */
  border-collapse: collapse; /* 可选，合并边框让样式更整洁 */
}
#flexing .welcome table .name { width:30%; border:1px solid red; color:red; }
#flexing .welcome table .price { width:30%; border:1px solid red; color:red; }
#flexing .welcome table .quantity { width:30%; border:1px solid red; color:red; }

HTML 部分（顺便修正了一个未闭合的td标签）

<div id="flexing">
  <div class="welcome">
    <h3>CHECK OUT</h3>
    <div class="cart"><a href="storenav/cart.html">5.00 EUR</a></div>
    <div class="note">
      <div class="checkout">
        <table>
          <tbody>
            <tr>
              <td class="name">Name</td>
              <td class="price">Price</td>
              <td class="quantity">Quantity</td> <!-- 修正：闭合td标签 -->
            </tr>
            <tr>
              <td>Faction | Hero rank</td>
              <td>5.00 EUR</td>
              <td class="button">1 <a href="#">aa</a> <a href="#">aa</a> <a href="#">aa</a></td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

额外说明 #

• 如果你的需求是三个td刚好填满表格的90%宽度，那三个30%加起来是90%，表格剩下的10%会是空白区域；如果想让三个td平分表格的90%宽度，可以把每个td的宽度设为33.33%（100%/3），这样三个加起来刚好填满表格的90%宽度。
• table-layout: fixed可以让表格的布局更快，同时确保单元格宽度不会被内容撑开，非常适合需要精准控制宽度的场景。

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