求助：如何设置表格单元格内div元素的自定义宽度

我来帮你搞定这个进度条的问题！你遇到的核心问题其实是HTML的width属性对<div>这类非替换元素不生效，再加上表格布局的特殊性，导致你的宽度设置没起作用。咱们一步步修复：

问题根源 #

你给<div>写的是HTML原生的width="50%"属性，但这个属性只对<img>、<input>这类替换元素生效，对于<div>这种非替换元素，浏览器会直接忽略这个属性——必须用CSS的width属性来控制宽度。另外，表格默认的table-layout: auto会让列宽根据内容自适应，可能干扰你的固定宽度设置。

修复方案 #

下面是调整后的完整代码，我标注了关键修改点：

/* 表格设置固定布局，确保列宽按我们的设置渲染，不会被内容撑开 */
table {
  width: 600px;
  background-color: #ddd;
  table-layout: fixed; /* 关键：固定表格布局 */
  border-collapse: collapse; /* 可选：合并边框，让样式更整洁 */
}

.bar-column {
  width: 100%; /* 这个设置没问题，让第二列占满表格剩余宽度 */
}

.bar {
  position: relative;
  display: block; /* 改成block，让div占满单元格高度，同时支持width设置 */
  height: 100%;
  background-color: yellow;
}

/* 可选：给链接设置内边距，避免文字贴边 */
.link {
  display: block;
  padding: 4px 8px;
  color: #333;
  text-decoration: none;
}

tr {
  height: 30px; /* 可选：统一行高，让进度条更美观 */
}

<table>
  <tr>
    <th>Value</th>
    <th class="bar-column">Name and bar</th>
  </tr>
  <tr>
    <td>20</td>
    <td class="bar-column">
      <!-- 把HTML的width属性换成CSS内联style -->
      <div style="width: 50%" class="bar"><a class="link" href="#">twenty</a></div>
    </td>
  </tr>
  <tr>
    <td>40</td>
    <td class="bar-column">
      <div style="width: 100%" class="bar"><a class="link" href="#">forty</a></div>
    </td>
  </tr>
  <tr>
    <td>10</td>
    <td class="bar-column">
      <div style="width: 25%" class="bar"><a class="link" href="#">ten</a></div>
    </td>
  </tr>
</table>

关键修改说明 #

1. 表格添加table-layout: fixed：强制表格按我们设置的宽度渲染，不会因为内容自动调整列宽，确保第二列的width:100%能正确占满剩余空间。
2. 把div的HTMLwidth属性换成CSSstyle：这是核心，只有CSS的width属性能控制div的宽度。
3. .bar设置display: block：让div成为块级元素，既能占满单元格的高度，又能正确应用width设置（inline-block也可以，但block更适合进度条的场景）。

进阶优化建议 #

如果你的进度条数值是动态生成的，可以用CSS变量来简化代码，比如：

.bar {
  /* ...其他样式... */
  width: var(--bar-width); /* 用CSS变量接收宽度值 */
}

然后HTML里这样写：

<div style="--bar-width: 50%" class="bar"><a class="link" href="#">twenty</a></div>

这样后续修改宽度只需要更新变量值，更易于维护。

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