在动态导航表上均匀填充单元格时改变 <td> 宽度答案

【问题标题】：Varying <td> width while evenly padding cells on dynamic nav table在动态导航表上均匀填充单元格时改变 <td> 宽度
【发布时间】：2012-07-31 18:09:57
【问题描述】：

我目前在我的网站顶部有一个表格，它由一个 100% 宽度的表格、一行和几个表格分区组成。 nav 分区的数量取决于你所在的页面，并且是动态生成的，所以没有办法轻松设置 td 宽度。此外，我尝试使用箭头的小图像作为每个导航项目的一种项目符号，每个导航项目的文本居中，但如果我无法对齐，我最终可能会删除它。

我的最终目标是在导航栏上放置 6 到 10 个项目，大小不同以适合文本，同时在栏内均匀分布这些 td 单元格，均匀分布。当我尝试同时使用箭头和文本时会出现问题，因为文本会自动自动换行到下一行而不是与文本对齐。这使得桌子形状奇怪。此外，在我尝试过的某些情况下，第一个单元格可能具有我设置的正确填充大小，例如左 7px，但是到表格行的末尾，间距完全错误，例如接近 50px。

是否有某种 div、td 和 CSS 组合来完成这项工作？用 div 代替我会更好吗？我已经没有想法如何在保持导航格式的同时均匀对齐这些单元格。任何帮助表示赞赏。

这是我目前所处的屏幕截图： http://dl.dropbox.com/u/27295687/Untitled.png

【问题讨论】：

能不能设置个jsfiddle，或者链接到live版，让我们看代码。
如果您不显示表格数据/图表/等，我完全支持 div。 div 更容易使用。
我建议您使用 CSS 导航菜单而不是使用表格。 webcredible.co.uk/user-friendly-resources/css/…
事实上，@Tim 在不显示被认为是最佳实践的表格数据时没有使用<div> 或其他适用元素吗？
@Matt，据我所知，是的，div 是最佳实践，在这种情况下，这将是最佳实践....但是，对于每个人来说都是如此。使用 div + css 具有更长的学习曲线 (IMO)，并且在运行中制作一些东西，表格有时更容易，虽然是不好的做法。

标签： php html css

【解决方案1】：

this 你想做什么？

我猜关键的 CSS 属性是 table 元素上的table-layout: fixed;

【讨论】：

【解决方案2】：

您需要向我们展示制作此栏的代码。有一百种方法可以在 HTML 中实现这一点。

如果您的箭头图像包含在 <div> 中，则可能会发生这种情况。 div-s 通过width: 100% 自动占据一整行。确保你的图片有一个宽度，如果它被包裹在一个 div 中，使用这个样式：

<div style="display: inline-block;"><img src="arrow.gif"></div>

但是，如果我们看到代码，您可以得到直接的答案。

【讨论】：