0

我现在正在摆弄表格列宽。由于 HTML5 中不推荐使用 width 属性，因此我试图通过 CSS 设置表格列宽。然而，由于某种原因，这不能可靠地工作。

更加具体...

我想通过使用表格来构建甘特图（对于那些还没有听说过它的人的某种时间表）。每个月由许多列组成，这些列代表相应月份的天数。标题使用 colspan 跨越一个月的所有日子。每天应该是 10px 宽度。因此，跨越 31 天（例如 1 月）的 TD 使用属性 style="width: 310px" 进行装饰。

项目任务还包括三个跨栏：第一栏是项目开始和任务开始日期之间的空闲时间，第二栏是任务活动的时间，第三栏是之间的时间任务本身的结束和整个项目的结束日期。

我希望这个解释能帮助你解决我的问题......

奇怪的是，这些列似乎以某种方式忽略了它们的宽度设置。它在 DOM 检查器中可见，就像 FireFox 提供的那样。它没有被删除，因此它被接受并在 DOM 中实际使用，但计算出的 TD 宽度并未反映此设置。一些 TD 比 style 属性给出的宽度更小，另一些则更宽。

我根本不明白为什么。

那么，有没有办法将跨列的宽度设置为绝对可靠且可重复的固定值？

4

4 回答 4

0

表格单元格宽度的计算方式不同。

与width:设置为金色的普通元素不同，表格单元格可以根据其内容具有不同的宽度。表格单元格的内容可能永远不会泄漏。因此，如果您有一个较长的单元格，它会扩大宽度，覆盖您的width:设置，从而“弄乱”其余单元格（如果您对所有单元格都有固定宽度）。

我的建议：给<table>自己一个宽度，让它自己整理。结果通常是最佳的。

于 2012-11-29T22:09:13.310 回答
0

正如您在提供的 Fiddle 中看到的那样，在 TH 和 TD 中有竞争对手的宽度设置。我已经从每个 TD 中删除了宽度设置，只保留了 TH 中的宽度设置。有了它，它现在似乎可以工作了。

于 2012-11-29T22:49:39.413 回答
0

在每个 TD 元素中，插入一个 div 并设置所需的宽度。这将确保宽度是固定的。

<table>
  <tr>
      <td><div style="width: 200px;">Fixed 200px width</div></td>
  </tr>
</table>
于 2012-11-30T00:49:42.393 回答
0

在每个 td 中插入 div 或<p>标签并设置 div 的宽度或<p>代替<td>它本身.. 几天前我遇到了同样的问题，但现在它正在工作。

于 2013-07-18T08:10:48.857 回答