使用 Blueprint CSS 框架时如何创建没有交替行颜色的表格？答案

【问题标题】：How to create a table WITHOUT alternating row colors when using Blueprint CSS framework?使用 Blueprint CSS 框架时如何创建没有交替行颜色的表格？
【发布时间】：2017-06-18 16:46:52
【问题描述】：

Blueprint CSS 框架默认使所有表格行交替颜色。如何为一个表禁用此行为？

我尝试使用 Chrome 开发者工具查看 Chrome 用于定义表的所有样式，但没有找到可以设置行颜色的样式。我也搜索了互联网并没有找到解决方案。这就像魔术......

谁能帮帮我？

【问题讨论】：

标签： css colors row css-tables blueprint-css

【解决方案1】：

您需要一个更具体的选择器来覆盖...虽然 BP 非常通用，但是这不应该是一个问题，例如：

table.no-zebra tbody tr:nth-child(even) td,
table.no-zebra tbody tr.even td {
  background: transparent;
}

您可以用任何颜色替换透明，以使所有行成为纯色。

【讨论】：

谢谢！这准确地回答了我的问题 - 禁用一个特定表格的样式。

【解决方案2】：

我只会在我自己的 css 文件中覆盖

tbody tr:nth-child(even) td, tbody tr.even td {background:none;}

【讨论】：

【解决方案3】：

这是我放入 CSS 文件顶部的内容，用于禁用蓝图的偶数表行背景颜色。

table tr:nth-child(even) td {
  background: transparent;
}

【讨论】：

【解决方案4】：

可能搜索并删除（来自 screen.css）

tbody tr:nth-child(even) td, tbody tr.even td {background:#e5ecf9;}

【讨论】：

这将关闭所有表的条带化，而不仅仅是特定类的一个或一个。
不要更改蓝图，只需覆盖它。更改库是个坏主意——如果您加载了新版本的库，您将不记得删除了哪个版本，等等。如果您覆盖 CSS 规则，当您获得库的新副本时，您的覆盖仍然功能。如果您想从所有表格中删除斑马条纹，您可以通过将类或 ID 添加到标记来覆盖规则，并在该类或 ID 下为表格创建规则。