如何制作一的HTML5表格

2019-09-13 00:24 来源:未知

  注意代码中的data属性,每一个单元格的data属性都与表格的header相对应。

  media query代码中隐藏表格的头部单元,并且将每一个单元格的data-th作为标签显示在单元格内容的前面。每一行的第一个单元格都设置了特别的背景色和前景色,使之更为清晰。

  你现在可以缩放浏览器来看看效果,非常不错。但是上面的代码是不可扩展的:要添加一个新行必须手动为每个单元格添加一个data-th属性。要想做到自动化,可以在服务器端实现,如PHP。也可以通过javascript来实现它。

  上面的代码的意思是:获取每一个th中的文本内容,然后分别剔除它们的回车和换行符。然后将这些文本分别添加到适当的单元格的data属性上,添加的规则与CSS样式的规则相一致。(使用setAttribute要比dataset要好,后者只有在IE 11中得到支持。)

TAG标签: html小表格实例
版权声明:转载须经版权人书面授权并注明来源