【问题标题】:Is there any way to center certain columns in table?有没有办法让表格中的某些列居中?
【发布时间】:2012-05-02 14:11:47
【问题描述】:

我广泛使用 css 格式并为 table 定义类,并为 table 定义了子类为 thead、tbody、tfoot 和另一个级别的子类为 tr、th、td....

在某些情况下,我想让表格的整个列具有某种风格的类...但不知道该怎么做。

有没有办法(使用 HTML5、css3 或其他方法?)使 tbody 的特定列中的所有单元格都具有相同的类?

我可以显式(手动)指定类,但我想避免这种重复。

欢迎提出任何想法。

附:可能我不应该为此烦恼,而只是为每个单元格明确指定类?

【问题讨论】:

标签: html css markup


【解决方案1】:

您可以使用 nth-child css 伪选择器来定位表格的中间列。

例子:

#myTable tr td:nth-child(3) {
  text-align: center;
}

这将针对连续第三列,只需相应地调整您的 X。也可以使用“n”作为每个第 n 个孩子的变量。查看http://css-tricks.com/how-nth-child-works/ 以获得全面的示例。

【讨论】:

  • 创建了一个对我不起作用的简单原型...我应该使用一些特殊的文档类型吗?如果您知道“通常的常见错误”,请告知。如果不是,将创建一个单独的问题(因为我找不到答案)... :(
  • stackoverflow.com/questions/10342168/… - 问题的详细信息以使用建议的方法。如果您有任何想法,请告知导致我的问题的原因。非常感谢!
  • 您好 Mensor,如果您将“nth-of-child”更改为“nth-child”,我会接受这个答案。谢谢。
  • @Budda 我刚刚改了...对不起,我输入“-of”时一定是在想什么
【解决方案2】:

查看colcolgroup 标签。它们可用于定义列。但是,对于适用的样式有一些限制。

http://www.quirksmode.org/css/columns.html

【讨论】:

  • @Budda 我很确定这不是真的。
  • 这里 (stackoverflow.com/questions/10289494/…) 是一个它不起作用的演示。如果您知道解决方案,请提供帮助。非常感谢您提前
  • 看看我提供的链接的限制部分。
  • 哦,现在我明白了。但是,colgroup/col 不能用于居中列内容(这是我的问题)。
  • 既然你提到了它,我确实在你的问题标题中看到了,实际上并没有将它放在问题的任何地方。它不能用于居中,除非在旧版本的 IE 中。
猜你喜欢
  • 2023-04-10
  • 1970-01-01
  • 2019-10-08
  • 1970-01-01
  • 2022-06-22
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多