四开表中的boostrap类

Question

我正在尝试从 quarto 文档

复制一个简单的示例

它应该在悬停时给我“条纹”，但没有发生......

我的代码：

---
title: "Untitled"
format: 
  html:
    theme:
      light: cosmo
---

| fruit  | price  |
|--------|--------|
| apple  | 2.05   |
| pear   | 1.37   |
| orange | 3.09   |

: Fruit prices {.striped .hover}

{}部分在标题中，未处理...

我哪里错了？

Answer 1

您似乎正在使用四开来创建一个带有条纹行的表格，这些行应该在悬停时突出显示，但它没有按预期工作。如果没有您正在使用的 Quarto 软件包的特定版本，则准确查明问题有点困难。不过，我可以为您提供一些解决问题的一般建议：

1。检查四开本版本： 确保您使用的 Quarto 版本支持您尝试使用的功能。 Quarto 正在积极开发中，较新的版本可能有错误修复和改进。

2. 检查生成的 HTML/CSS： 渲染文档后，在浏览器中检查生成的 HTML/CSS。右键单击表格，选择“检查”（或类似选项，具体取决于您的浏览器），然后检查 CSS 类（

   .striped

   和

   .hover

   ）是否正确应用。如果不是，则您指定类的方式可能存在问题。

3. 更正 CSS 类： 确保 CSS 类

   .striped

   和

   .hover

   已在主题 CSS 或 Quarto 文档中链接的自定义 CSS 文件中定义。这些类应包含用于条纹和悬停效果的适当样式。例如：

   .striped tbody tr:nth-child(odd) {
       background-color: #f2f2f2;
   }
   
   .hover tbody tr:hover {
       background-color: #ffd700;
   }
   

4. 验证文档： 仔细检查 Quarto 文档或 Quarto 团队提供的任何示例，以确保您使用正确的语法向表添加类并设置它们的样式。

5. 咨询社区： 如果您仍然遇到问题，请考虑联系 Quarto 社区或查看他们的论坛或 GitHub 存储库以寻求帮助。其他用户或开发人员可能遇到并解决了类似的问题。

如果您仍然遇到问题，请提供有关您正在使用的四开版版本、您收到的任何错误消息或您遇到的任何具体问题的更多详细信息。这些信息将帮助我更有效地为您提供帮助。