"booktabs" like tables for markdown

Question

I'm customizing a css file for a Typora Markdown template. I would like to add horizontal lines to follow the formatting guidelines set by the LaTeX package booktabs

Essentially, all I would need is a thicker top-most line, a thicker bottom-most line, and a thin line under the header. Note that the partial line under Item is necessary (but it would be nice to understand how).

How would I modify the code below to offer a format for the image shown?

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;

Dan · Answer 1 · 2021-08-16T21:05:56.800

I achieved a close approximation of LaTex table styling with the following HTML and CSS:

table {
  border-collapse: collapse;
  border: 2px solid #000;
  border-width: 2px 0;
  text-align: left;
}

th,
td {
  line-height: 1.4;
  padding-right: 12px;
}

th:last-child,
td:last-child {
  padding-right: 0;
}

th:not(:empty) {
  border-bottom: 1px solid #000;
  font-weight: 400;
}

thead:first-child th {
  text-align: center;
}

tbody tr td:last-child {
  text-align: right;
}

<table>
  <thead>
    <tr>
      <th colspan="2">Item</th>
      <th></th>
    </tr>
  </thead>
  <thead>
    <tr>
      <th>Animal</th>
      <th>Description</th>
      <th>Price ($)</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Gnat</td>
      <td>per gram</td>
      <td>13.65</td>
    </tr>
    <tr>
      <td></td>
      <td>each</td>
      <td>0.01</td>
    </tr>
    <tr>
      <td>Gnu</td>
      <td>stuffed</td>
      <td>92.50</td>
    </tr>
    <tr>
      <td>Emu</td>
      <td>stuffed</td>
      <td>33.33</td>
    </tr>
    <tr>
      <td>Armadillo</td>
      <td>frozen</td>
      <td>8.99</td>
    </tr>
  </tbody>
</table>

edemaine · Answer 2 · 2021-08-16T20:28:10.977

Here's some reasonable CSS that matches your described goal:

    /* 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 */
    }

To demo this, I made this Markdown table:

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

It renders on StackOverflow here as the following HTML:

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

Now taking that HTML and adding CSS styling to it, we get this demo:

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. It's also not possible to do multiple header rows, I'm afraid. But you could probably manually embed a <table> with your own <thead> and <td colspan=2> and so on. (I tried Typora Markdown briefly, but couldn't figure out how to use it well, so I don't know exactly what it supports.)

"booktabs" like tables for markdown

2 Answers2