Question

我们正在使我的学校网站移动友好。 http://as.sjsu.edu/ascr/index.jsp?val=fit_group 该网站包含来自所有不同部门（数百页）的大量内容。此内容目前在表格中。为了使它具有移动友好性，我使用max-width，min-width和float：left将样式应用于表格，以便在较小的屏幕中查看时垂直堆叠这些表格。这是一个例子： http://as.sjsu.edu/cf/vaishak/responsiveTables/table.html 这很好用。但是，该站点包含许多不同的表格布局，并且它们具有空单元格和列，用于在具有内容的单元格之间创建边距以及表格的硬编码尺寸。我们使用adobe贡献让不同的部门更新内容。我们需要继续使用贡献，它只支持表格进行编辑。

有关如何有效地将所有内容导入到响应式布局或如何处理所有这些内容而无需手动更改每个页面上的源代码的任何建议？

我们考虑的唯一过程就是编写一个脚本来摆脱不必要的单元格并将响应的CSS id /类插入到包含内容的单元格/表格中，但编写算法来识别需要哪些单元格是极具挑战性的以及应插入样式的位置。我似乎没有在布局上找到能够创建这样一个脚本的模式。

非常感谢任何有用的帮助。

Answer 1

我建议您从以下非常好的响应数据表技巧列表中选择一个解决方案：

https://code.recuweb.com/2018/10-solutions-for-responsive-data-tables/

我总结了回答这个问题的基本方法，但还有更复杂的选择：

从标记中删除固定宽度

在：

 <table width="540">
  <tr>
    <td width="300">Header 1</td>
    <td width="60">Header 2</td>
    <td>Header 3</td>
    <td>Header 4</td>
  </tr>
</table>

后：

 <table>
  <tr>
    <td>Header 1</td>
    <td>Header 2</td>
    <td>Header 3</td>
    <td>Header 4</td>
  </tr>
</table>

不推荐使用width属性 - 最好让浏览器调整大小列。

基本样式

table {
    border-collapse: collapse;
    border-spacing: 0;
    border: 1px solid #bbb;
}
td,th {
    border-top: 1px solid #ddd;
    padding: 4px 8px;
}

可选条纹行

IE8不支持
nth-child

tbody tr:nth-child(even)  td { background-color: #eee; }

适合移动设备的表格

注意：将表包装在具有的DIV中是更好的语法 overflow-x：scroll;

@media screen and (max-width: 640px) {
    table {
        overflow-x: auto;
        display: block;
    }
}

使大型桌面基础网站移动友好

1 个答案: