Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[bug-fix] Add padding to default markdown table cells #2617

Merged
merged 3 commits into from
Aug 4, 2024
Merged

[bug-fix] Add padding to default markdown table cells #2617

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b307726
Add formatting for readability
rstein66 Aug 4, 2024
7566b7e
Add padding to default markdown table cells
rstein66 Aug 4, 2024
4886e9b
Apply prettier formatting
rstein66 Aug 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 16 additions & 2 deletions _posts/2023-03-21-tables.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,17 @@ related_posts: true
pretty_table: true
---

Using markdown to display tables is easy. Just use the following syntax:
Using markdown to display tables is easy.

## Simple Example

First, add the following to the post's front matter

```yml
pretty_table: true
```

Then, the following syntax

```markdown
| Left aligned | Center aligned | Right aligned |
Expand All @@ -20,7 +30,7 @@ Using markdown to display tables is easy. Just use the following syntax:
| Left 3 | center 3 | right 3 |
```

That will generate:
will generate

| Left aligned | Center aligned | Right aligned |
| :----------- | :------------: | ------------: |
Expand All @@ -30,6 +40,8 @@ That will generate:

<p></p>

## HTML Example

It is also possible to use HTML to display tables. For example, the following HTML code will display a table with [Bootstrap Table](https://bootstrap-table.com/), loaded from a JSON file:

{% raw %}
Expand Down Expand Up @@ -62,6 +74,8 @@ It is also possible to use HTML to display tables. For example, the following HT

<p></p>

## More Complex Example

By using [Bootstrap Table](https://bootstrap-table.com/) it is possible to create pretty complex tables, with pagination, search, and more. For example, the following HTML code will display a table, loaded from a JSON file, with pagination, search, checkboxes, and header/content alignment. For more information, check the [documentation](https://examples.bootstrap-table.com/index.html).

{% raw %}
Expand Down
1 change: 1 addition & 0 deletions _sass/_base.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ table {
td,
th {
font-size: 1rem;
padding: 1px 1rem 1px 0;
}

th {
Expand Down