html - "booktabs"类似 Markdown 的表格

Question

我正在为 Typora Markdown 模板自定义 css 文件。我想添加水平线以遵循 LaTeX 包 booktabs 设置的格式指南

本质上，我所需要的只是一条较粗的最顶部线、一条较粗的最底部线和一条标题下方的细线。请注意，Item 下的部分行是必要的(但最好了解如何实现)。

如何修改下面的代码以提供所显示图像的格式？

table > thead > tr > th,
table > thead > tr > td,
table > tbody > tr > th,
table > tbody > tr > td,
table > tfoot > tr > th,
table > tfoot > tr > td {
    padding: 12px;
    line-height: 1.2;
    vertical-align: bottom;
    border-bottom: 0px solid;

Answer 1

这里有一些符合您描述的目标的合理 CSS:

    /* Make horizontal lines connect through column boundaries */
    table {
      border-collapse: collapse;
    }
    /* General styling of all cells */
    table > :is(thead, tbody) > tr > :is(th, td) {
      padding: 3px;
      text-align: left;
    }
    table > thead > tr > :is(th, td) {
      border-top: 2px solid; /* Top thick line */
      border-bottom: 1px solid; /* Below head thin line */
    }
    table > tbody > tr:last-child > :is(th, td) {
      border-bottom: 2px solid; /* Bottom thick line */
    }

为了演示这一点，我制作了这个 Markdown 表格:

| Animal | Description | Price |
|--------|-------------|------:|
| Gnat   | per gram    | 13.65 |
|        | each        |  0.01 |
| Gnu    | stuffed     | 92.50 |
| Emu    | stuffed     | 33.33 |
| Armadillo | frozen   |  8.99 |

它在 StackOverflow 上呈现为以下 HTML:

<表类=“s-表”> <标题> 动物 描述 价格 <正文> 蚊 每克 13.65 每个 0.01 Gnu 填充 92.50 鸸鹋 填充 33.33 Armadillo 卡住 8.99

现在采用该 HTML 并向其中添加 CSS 样式，我们得到了这个演示:

table {
  border-collapse: collapse;
}
table > :is(thead, tbody) > tr > :is(th, td) {
  padding: 3px;
  text-align: left;
}
table > thead > tr > :is(th, td) {
  border-top: 2px solid;
  border-bottom: 1px solid;
}
table > tbody > tr:last-child > :is(th, td) {
  border-bottom: 2px solid;
}

<table class="s-table"><thead>
<tr>
<th>Animal</th>
<th>Description</th>
<th style="text-align:right">Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Gnat</td>
<td>per gram</td>
<td style="text-align:right">13.65</td>
</tr>
<tr>
<td></td>
<td>each</td>
<td style="text-align:right">0.01</td>
</tr>
<tr>
<td>Gnu</td>
<td>stuffed</td>
<td style="text-align:right">92.50</td>
</tr>
<tr>
<td>Emu</td>
<td>stuffed</td>
<td style="text-align:right">33.33</td>
</tr>
<tr>
<td>Armadillo</td>
<td>frozen</td>
<td style="text-align:right">8.99</td>
</tr>
</tbody>
</table>

It's not possible to do multi-column cells in Markdown tables, but there are workarounds.恐怕也不可能做多个标题行。但您可能可以手动嵌入 <table>与您自己的<thead>和<td colspan=2>等等。 (我简单地尝试过Typora Markdown，但不知道如何很好地使用它，所以我不知道它到底支持什么。)