简而言之，响应式设计涉及采用相同的内容和功能并重新排列它们，以便在移动设备上轻松查看。因为我们现在需要考虑如何以多种维度呈现我们的网站，所以人们以前使用的一些旧技巧不再有效。
肇事者#1：基于表格 斯洛文尼亚手机号码数据库 的布局。
避免使用表格进行布局
正确构建的网站是通过采用 HTML 并将其与 CSS 相结合来呈现的。CSS 将告诉 HTML 中的元素它们有多大、它们应该放在哪里以及它们与页面上的其他元素的关系。正是这种方法让我们能够仅通过更改 CSS 来更改桌面和移动体验之间的元素大小和定位。
但经常发生的情况是，网站管理员会使用表格来实现页面的外观和布局。这意味着他们会创建一个表格，使用其行和列作为网格，并将其内容放在适当的单元格中。
例如，有些人希望他们的内容具有两列外观，并使用表格来获取它。但由于此布局是在 HTML 中，因此我们无法使用 CSS 在不同设备之间进行更改。桌面上美观的两列外观在手机上无法读取。
重点是避免使用表格来布局页面。表格应该用于显示表格数据。
例如，尺寸或价格表通常以表格形式呈现。没有其他实用的方法来显示它。但即使这是一种合适的用法，你仍然会遇到与以前相同的问题。要么表格会自行压缩以适应手机的宽度，要么需要水平滚动。这两种解决方案都不是很好。我们需要的是响应式表格。
如何创建响应式表格
幸运的是，一些有进取心的人已经找到了解决这个问题的方法。我最近实施了CSS Tricks 网站上描述的解决方案之一。
理解它需要一点 HTML/CSS 知识，但其要点是包含标签的标题行显示在桌面上，但在移动设备上隐藏。数据的标签被 <td> 单元格中名为“data-title”的特殊属性替换。
当表格在移动设备上呈现时，表格上的每一行都显示为两列；第一列显示数据标题，与标题行中的内容相同，第二列显示数据。结果是一个完美响应的表格。下图说明了含义。
桌面桌
桌面表
响应式表格
响应式表格
总结
您是否了解响应式表格的内部工作原理并不重要；重要的是，表格只应在内容合适时使用，而不应用于布局目的。如果您（或您的 Web 开发人员）正确使用表格并实施链接文章中描述的特殊标记，则可以保持优化的移动体验不变。
