HTML中多个表格中同一列的相同[不固定]宽度答案

【问题标题】：same [not-fixed] width of same column in multiple tables in HTMLHTML中多个表格中同一列的相同[不固定]宽度
【发布时间】：2012-08-01 00:37:08
【问题描述】：

我在同一页面上有多个表格，每个表格的列数相同。我希望所有表格中的第一列具有相同的宽度，第二列也是如此，等等。我不想指定固定宽度（例如，100px），而是让浏览器计算它。如何在 HTML/XHTML/CSS/js 中完成此操作？

【问题讨论】：

我几乎可以保证浏览器会做的事情（如果它可以做你所要求的）将不会是你想要的样子。为什么不能做固定宽度？
如果我在一张表中完成所有操作，它看起来就像我想要的那样，所以现在我只想将它拆分为单独的表。
请问您为什么要避免使用固定宽度？是否允许未知宽度，让浏览器为你计算？
是的，主要是。我个人讨厌固定宽度的页面。对于我想要运行浏览器的大小，它们总是太小或太大。作为用户，我知道我希望我的浏览器的大小，我讨厌网站认为他们知道得更好。因此，我避免制作固定宽度的网页。

【解决方案1】：

您可以在 CSS 中将宽度指定为总页面宽度的 %。将相同的类分配给所有表中的第一列并设置width: 15%; 这并不理想，因为布局会根据客户的分辨率而有所不同。你最好使用固定宽度和position: fixed;

【讨论】：

“布局会有所不同”是什么意思？根据页面宽度的百分比设置宽度是可以的，但我不能像浏览器那样适应自动换行。
我的意思是页面的给定部分/列中的对象可能无法正确排列，具体取决于浏览器窗口大小和/或客户端的分辨率。或者，您可以为每个元素设置一个固定宽度以及margin: 0 auto;，让浏览器自动计算边距。这是包装器的常见做法。 See this post
如果宽度的总和大于浏览器窗口会发生什么？或者如果宽度小于使用浏览器默认字体大小的元素？我想我会试试看。
有时必须做出妥协。在绝大多数情况下（你不能总是让每个人都满意）有一些标准做法可以正常工作，例如960 grid system 和Twitter's Bootstrap
Bootstrap 看起来很酷。我可能会将其用于未来的项目。