在响应实用程序中使用表有什么问题？

Question

Bootstrap的page about responsive design说：

  

响应式实用程序不应与表一起使用，因此也是如此   不支持。

对网络开发不熟悉，我不熟悉这是在谈论什么。似乎对使用<table>存在普遍厌恶。这是真的吗？

另外，措辞的措辞对我来说没有意义。难道不应该这样读吗？

  

不应在响应式实用程序中使用表，因此也是如此   不支持。

Answer 1

表是非常结构化的元素。 <td>只能是一个列。您无法将其更改为突然显示为行或将其浮动到某处，等等。

HTML，在响应式设计中，不应该定义CSS的工作应该是什么样的东西（或者它应该在某种程度上出现的地方）。 HTML应该只是将文本和其他元素分组。因此，HTML <table>及其所有相关标签打破了这种范式。

CSS display现在包含类似于表格的元素：How is a CSS “display: table-column” supposed to work?，因此无需嵌入<table>标记，并允许您使用更通用的<div>标记及其类似标签，因此现在看起来像<div>＆gt; <table，没有什么可以阻止你只是通过更新CSS使它看起来完全不同。你甚至可以让它看起来与不同的观众不同等等。

希望这有点帮助。

Answer 2

在最新的浏览器中并不是这样，但传统上很难在CSS中将表格设计为没有表格布局。

因此，虽然表格可能是表格数据的正确语义元素，但语用学意味着如果在某些响应式设计配置文件中，您希望数据以线性格式显示，则无法完成，除非通过使用JavaScript来翻录表格标记并替换它。

在各种浏览器中尝试table, tbody, tr, td {display:block; } - （JsFiddle http://jsfiddle.net/Z26GF/）（例如将IE10与IE9行为进行比较），看看我的意思。

（我越了解Bootstrap，我就越不喜欢它。它似乎鼓励了一些糟糕的HTML实践。这是其中之一）