Question

我有以下降价表，这是我的'input.md'降价文件的内容。

Col01 | Col02
----- | -----
DataX | DataY

我将下面显示的CSS粘贴到记事本中并将其保存为'custom.css'。我将此'custom.css'放在与input.md文件相同的目录中，并运行以下命令。

pandoc -t html --css=custom.css -o output.html input.md

预期输出是一个表格，其中的线条显示为边框。实际输出是一个没有边框的表，虽然它很好地对齐，就像表应该一样。我做错了什么？

这是我的自定义CSS：

table {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 24px;
    border-spacing: 0;
    border-bottom: 2px solid black;
    border-top: 2px solid black;
}
table th {
    padding: 3px 10px;
    background-color: white;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 1px solid black;
}
table td {
    padding: 3px 10px;
    border-top: none;
    border-left: none;
    border-bottom: none;
    border-right: none;
}


/* Add border for the last row of the table.           */
/*      (Might be of use for table footnotes, later).  */
/* tr:last-child td { border-top: 2px solid black; }   */

Answer 1

除非使用-s或--standalone选项调用pandoc，否则输出中将不包含CSS。添加该选项应该可以解决该问题。

Answer 2

pandoc -t html的问题是它会生成没有标题的HTML文档。只需获取它生成的HTML文件并将其添加到开头：

<html>
<head>
<style>
...here comes your CSS file content...
</style>
</head>
<body>
...rest of the HTML file generated by pandoc...
</body>
</html>

，并在末尾附加上面提到的这两行（所以我们玩的很好：-））。

使用CSS降低HTML表格边框

2 个答案: