【问题标题】:Hiding a column in a table?隐藏表格中的列?
【发布时间】:2019-02-04 17:57:46
【问题描述】:

我正在制作一张桌子:

  • 列的天数
  • 行数
  • 并且表格数据将是空的、样式化的锚点(在点、线和块之间变化)。

当显示器缩小到平板电脑/移动设备尺寸时,我想隐藏除某一天以外的所有日期(列)。

据我了解,很明显它是一个表格,我应该使用表格元素。但是隐藏/样式表/列是有问题的。我想避免对每个 td 应用列类,我可能需要支持 ie8,因此 nth-child 不在循环中,而 col 对于我需要做的样式来说太有限了http://www.quirksmode.org/css/columns.html

所以我的问题是;我应该追求 td 的应用类还是最语义化的替代方案?

编辑:

我想我已经决定使用嵌套的 ul。我敢肯定它在语义上是不正确的,但就可维护性而言,我认为使用表格几乎是不可能的

【问题讨论】:

  • 来自问题。我可以描述的是您想为表格和列添加不同的样式...应该使用 css 并应用于您想要的表格和列..

标签: html html-table


【解决方案1】:

认为你不走运。只需为列中的所有 td 添加一个类。这是目前最好的向后兼容解决方案。

您可以在此处阅读有关 Stack Overflow 上“ways to hide first column”的所有信息。

【讨论】:

  • 这行得通,但不得不为每个 td 添加一个类感觉有点笨拙 - 我的时间划分是 24 小时 x 7 天以 15 分钟为增量,所以我有 672 个 td!跨度>
  • @Chris 我知道以不同的方式做会更好,但如果你想支持 IE8,你没有太多选择。另一件事。您是否测试过在移动设备上打开一个有 672 行的表格会发生什么?我认为它不会表现得那么好。我个人会使用 AJAX 进行分页加载数据。
  • 这是 672 td 不是 tr。页面大小目前为 78kb,所以没问题。不过我想我会使用嵌套的 ul,表格太乱了,无法设置样式,尤其是当您使用移动设备时..
猜你喜欢
  • 2012-01-04
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2016-02-26
  • 2014-12-03
  • 2016-01-28
  • 1970-01-01
相关资源
最近更新 更多