首页 > 解决方案 > 样式降价的最佳方式

问题描述

我在我们的网站上使用 Jekyll 来使用 GitHub 页面来布局网站。效果很好。一个问题是降价表的布局不正确。发现表格没有默认样式,所以除非你明确指定表格的一些样式。代码如下所示:

---
layout: page
permalink: "/membership/join/"
title: Joining the Readium Foundation
---
<style>
.tablelines table, .tablelines td, .tablelines th {
    border: 1px solid black; padding:10px;
    }
</style>

|  Company Type  | Total Company Revenue | Member Dues |
|:-------------:|:-------------:|:------------:|

这在与 Jekyll 一起使用时效果很好。但是,当在 GitHub Wiki 上为相同的 repos 使用类似的代码时,标签及其内容也会被渲染。代码如下:

<style>
.tablelines table, .tablelines td, .tablelines th {
    border: 1px solid black; padding:10px;
    }
</style>

|  Publication  | URL | Langauge |
|:-------------:|:-------------:|:------------:|
| epubsecrets  | [http://epubsecrets.com/](http://epubsecrets.com/) | English |

表格渲染得很好,但样式标签被渲染为文本。

建议?某种隐藏样式标签的方法?

此外,我发现这个问题/答案建议添加此代码:

(setq markdown-xhtml-header-content
"<style>
    .tablelines table, .tablelines td, .tablelines th {
    border: 1px solid black; padding:10px;
    }
</style>")

不幸的是,它不起作用——至少在 GitHub Wiki 上不起作用。

标签: htmlcssmarkdownjekyll

解决方案


我同意 Waylan... 只需覆盖样式表中的 Jekyll 默认值。将此代码添加到您的自定义 style.css:

body .tablelines table, 
body .tablelines td, 
body .tablelines th {
    border: 1px solid black; padding:10px;
}

我在 CSS 规则中添加了“body”以提高特异性。在内容中插入 CSS 是不可取的。


推荐阅读