我一般同意网站布局应该使用 <div>s 而不是 <table>s 的想法。但是，我遇到这种情况不起作用 - 或者至少，我还没有找到任何解决方案。
我有一个动态站点，许多客户共享相同的模板（他们可以从一组可用模板中选择一个）。模板定义了网站的总体布局——通常是顶部的标题、两列或三列（左侧的菜单、中间的主要内容、有时右侧的附加内容）和底部的页脚——没什么特别的。客户对标题和右侧内容的内容有完全的控制权，对菜单和主要内容区域的内容有很大的控制权。
这里的重点是我不知道任何列的宽度是多少。客户可以为每个菜单项设置长文本或短文本，他们可以在右侧栏中放置小图或大图，主要内容可以是免费的。我不能对我的客户施加太多的设计限制——他们对网站的外观有自己的想法（其中一些比 MySpace 页面更丑陋）。网站有一个“首选”宽度（主要的 <table> 宽度属性），因此当内容合理时，网站可以保持漂亮的外观。
基于表格的布局只是处理这个问题 - 无论列的大小如何，表格都会调整以适应。<div>s 然而，不要。如果菜单变宽一点，其他列会下拉到它下方。如果某些内容对于它的容器 <div> 来说太宽，它会超出边界并干扰它旁边的任何内容。
我玩过使用 Javascript 来调整列宽，但这会导致布局闪烁，其中 <table> 只是渲染它而没有任何大惊小怪。我知道 CSS 显示属性的各种与表格相关的选项，但由于它们的支持不够广泛（顽皮的 IE），我无法使用它们。（顺便说一句，<table>s 从未打算用于布局的论点，所以我们应该使用 <div>s - 然后告诉他们表现得像 <table>s - 对我来说听起来很有趣。 )
因此，虽然出于所有常见原因我想切换到基于 <div> 的布局，但我不相信我可以使用这些模板（或者，至少在每个人都升级到 IE 10 之前不能）。我希望 SO 帮派可以帮助我找到一种方法来做到这一点。