表格可以做哪些 CSS 定位不能做的事情？答案

【问题标题】：What can tables do that CSS positioning cannot?表格可以做哪些 CSS 定位不能做的事情？
【发布时间】：2017-05-27 23:45:07
【问题描述】：

我知道有很多好的论据更喜欢 CSS 定位而不是基于表格的布局。我想知道的是 CSS 模型对于表的所有功能是否完整（假设是一个相对现代的浏览器）。是否有表格可以实现但使用 CSS 不可能或不切实际的布局？

【问题讨论】：

标签： html css html-table

【解决方案1】：

CSS 没有很好的方法来处理真正的表格数据。如果您的数据本身是按行和列结构化的，那么table 标签仍然是呈现它的最佳方式。虽然您可以在 CSS 中“伪造”它，但它会导致代码复杂且难以维护。

请注意，表格数据并不总是意味着数字表格。有时表单和其他类型的交互式内容也可以是表格的，如果它们的字段在逻辑上将它们自己分组为列和行。关键是要问自己，“如果我把数据写在一个页面上，而计算机与它无关，我会认为我的数据是行和列吗？”

【讨论】：

@sr pt - 我不同意。最终结果就是用户所看到的。如果使用全 CSS 设计让您内心感觉良好，但花费的时间是您的三倍，那么您只会浪费公司的时间和金钱。
Dan 是正确的——“表格”的一个很好的定义是“在行和列中整齐排列的东西”。像大多数数据输入表格一样。像报纸式的专栏。像大多数网站的主要结构一样。
请注意，我仍然不提倡使用表格进行主站点布局。 CSS 提供了对表格模型的许多改进。但是网站内部的许多元素——例如具有多列的表单，其中字段需要按列对齐——是结构上的表格。这不仅仅是为了布局方便。

【解决方案2】：

如果可以的话，我会切换到基于 css 的布局。语义论证是正确的，但有实际考虑。表格将：

绝对防止 'float wrap' 导致 div 因空间不足而落到下一行
为您提供相同高度的列
允许在运行时才知道宽度和高度的动态布局
提供 colspans 和 rowspans
减少询问如何在没有表格的情况下进行操作的 SO 问题的数量 :)

有一些 css 显示属性（表格单元格等）可以模仿其中的一些，但我认为支持还不够广泛，无法使用它们（除非您可以控制用户的浏览器选择）。

我工作的网站在布局中需要完全动态的列宽。多个客户使用相同的站点模板，我不知道他们会在菜单或页眉或内容单元格中放入什么。（而且不知道他们会发现什么吸引人，这是另一个问题......）主要内容框向下移动到下一行，否则背景颜色将无法填充所需的高度。

在一个完美的（对我而言）世界中，我们将有<table>s 用于表格数据，以及另一组几乎相同的布局标签 - 称之为<layout>（以及相应的行和单元格标签）。或者，将“模式”属性添加到<table> 标记 - 值将是“数据”和“布局”，以便屏幕阅读器和搜索引擎知道该做什么。也许在 html 6...

编辑：我应该补充一下，关于“浮动包装”的事情 - 目前有一个关于 SO 的问题，其答案非常有效here。它并不完美，我也太复杂了，但它在很多情况下都能解决问题。

【讨论】：

+0 表示第一，-1 表示第二和第三，+1 表示第四和第五。 :D
@sr pt：我很高兴你第一次给了我+0，而不是-0 ...说真的，我已经看到了大部分这些东西的部分解决方法，但从来没有真正的动态宽度（我的第三个）。你有东西给我吗？

【解决方案3】：

表格的意思是并且应该用于表格数据，而不是用于结构。就我个人而言，我认为表格被用作一种简单的出路，而且我从未遇到过 CSS 无法解决的情况。

对于垂直定位和全高列来说，表格肯定更容易，但这可以通过 CSS 来克服。

【讨论】：

我不是提倡在编程中偷工减料的人，但在某些情况下，“hack”比以“理想”方式做事更好。 Html 表工作。在每个浏览器中。总是。它们易于理解和维护。在布局 div 方面，CSS 与此相反。
@Nemi - 嘘！那么标准是什么？
+-0 我不同意。有种情况在没有表格或 JavaScript 的情况下无法处理。 CSS 标准的设计者在提供 table 的替代品用于布局方面做得很差——为什么，我不知道。 As for "the easy way out", I put it to you that when the choice is between a five-line <table> construct, or 80 lines of CSS plus three browser-specific hacks for IE6 and 7 and maybe 8, plus a JavaScript 块，因为 (Safari|Opera|xyz) 不支持这个那个伪类，“简单的出路”确实是正确的方法。

【解决方案4】：

我有一个！在我看来，css 有一些东西是不可能的，但表格却是可能的。我昨天刚问了这个问题，得到了答案。

如果您想在一行中有两个单独的元素，无论宽度如何，您都必须使用表格。也就是说，如果这两个元素要么是内联的，要么是浮动的，如果它们是动态调整大小并变得比容器宽，它们将中断到下一行而不是溢出。如果您绝对要求它们保持在同一行，即使第二个会溢出容器的宽度，那么它们需要是表格行中的单元格。

edit：一些测试表明这仅适用于浮点数。如果您的元素是显示内联或内联的，那么您可以在容器上设置white-space:nowrap。然而，在这种情况下，似乎（无论如何在 FF 中）元素之间存在一个神秘的空间，对于我昨天的目的而言，这将是一个问题。

【讨论】：

我不确定这是不是真的。有一些方法可以控制 CSS 中的包装行为。
那么昨天有人在我的问题上对我撒了谎。如果我能找到它会删除它。
也许它们在某种有限的情况下是正确的。作为一般性陈述，我认为它不准确。

【解决方案5】：

看起来很糟糕？

说真的。没有。

人们使用表格的一个很好的例子是，表格字段以漂亮的方式呈现变得更加容易，但它完全混淆了页面的可访问性和语义含义。在 CSS 中稍加努力，您就可以达到同样的效果，而且效果更好。

【讨论】：

【解决方案6】：

你可以用 CSS 做同样的事情，但它通常不那么优雅。

表格对于显示表格数据（即不是布局）很重要。它们是逻辑的、语义的结构，应该这样使用。它们包含列和行之类的概念，而单独的 CSS 不包含这些概念。

【讨论】：

我不确定我是否相信“它们是用于 TABULAR”数据的论点。您意识到 http/html 是用于静态内容的，对吧？ Web 应用程序和在会话中保存状态是一种变态，对吧？将工具用于某事，因为它运作良好，即使它最初不是为该用途而制造的，也没有错。它很聪明。
按照你的逻辑 Nemi，我们应该仍然使用在线 FONT 语句和间隔 GIF。不仅技术在发展，而且对如何使用这项技术的思考也在发展。当然，您可以使用表格进行布局，也可以使用 ROCK 敲钉子。

【解决方案7】：

表格可以做哪些 CSS 定位不能做的事情？
理论上，没什么，因为您可以使用display: table;、display: table-cell; 或其他类似的值作为display。

【讨论】：

嗯，是的。但这使它成为一个表格，所以我认为这超出了问题的精神。
但除了ensure [float'ed etc] elements don't spill 和liquid col/row spans 之外，我看不到他们能做的任何事情，而你用CSS 做不到。在大多数情况下，此游戏中唯一可玩的牌是save time。

【解决方案8】：

save you time

【讨论】：

很高兴您同意我的回答

【解决方案9】：

在标记中使用它们（表格）不必担心定位或关于跨浏览器兼容性。桌子几乎可以工作跨浏览器的方式相同

【讨论】：