"booktabs" like tables for markdown

user_11551386 0
Viewed 259

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;

enter image description here

html-table markdown css html
2 Answers

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>

user_163923610

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.)

user_77976610
Related