From 550b2e6bff7428caabb3c50a08e101fb3f210feb Mon Sep 17 00:00:00 2001 From: Sumeet Date: Sat, 18 Jul 2020 23:17:43 +0530 Subject: [PATCH 1/3] Added example of table --- _posts/2018-06-12-powerful-things-markdown-editor.md | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/_posts/2018-06-12-powerful-things-markdown-editor.md b/_posts/2018-06-12-powerful-things-markdown-editor.md index 2d0f3f594f..73ceae0535 100644 --- a/_posts/2018-06-12-powerful-things-markdown-editor.md +++ b/_posts/2018-06-12-powerful-things-markdown-editor.md @@ -97,8 +97,17 @@ The quick brown jumped over the lazy. Another way to insert links in markdown is using reference lists. You might want to use this style of linking to cite reference material in a Wikipedia-style. All of the links are listed at the end of the document, so you can maintain full separation between content and its source or reference. +## Tables + +{:.myTable} +| Tables | Are | Cool | +|:--------:|:-------------:|:-----:| +| col 1 is | left-aligned | $1600 | +| col 2 is | centered | $12 | +| col 3 is | right-aligned | $1 | + ## Full HTML Perhaps the best part of Markdown is that you're never limited to just Markdown. You can write HTML directly in the Markdown editor and it will just work as HTML usually does. No limits! Here's a standard YouTube embed code as an example: -

\ No newline at end of file +

From 08179abfc3bf2ce9378e7065f3a073e03c360cdf Mon Sep 17 00:00:00 2001 From: Sumeet Date: Sat, 18 Jul 2020 23:18:55 +0530 Subject: [PATCH 2/3] Added css for .myTable class --- assets/css/screen.css | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/assets/css/screen.css b/assets/css/screen.css index b306d2cf27..f4f6b114d8 100644 --- a/assets/css/screen.css +++ b/assets/css/screen.css @@ -898,4 +898,17 @@ iframe { .lazyimg[data-srcset] { opacity: 0; transition: opacity .25s; -} \ No newline at end of file +} + +.myTable { + width: 100%; + margin-bottom: 2rem; + border: 1px solid #ddd; + border-collapse: collapse; +} + +.myTable td, th { + border-bottom: 1px solid #ddd; +} + +.myTable tr:hover {background-color:#f5f5f5;} From adaeed07ab12d1ae3e183514f17ae684fbb1db9b Mon Sep 17 00:00:00 2001 From: Sumeet Date: Sun, 19 Jul 2020 00:05:40 +0530 Subject: [PATCH 3/3] Added css for tables in article-post --- assets/css/screen.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/assets/css/screen.css b/assets/css/screen.css index f4f6b114d8..52ad3f18d8 100644 --- a/assets/css/screen.css +++ b/assets/css/screen.css @@ -900,15 +900,15 @@ iframe { transition: opacity .25s; } -.myTable { +div.article-post>table { width: 100%; margin-bottom: 2rem; border: 1px solid #ddd; border-collapse: collapse; } -.myTable td, th { +div.article-post>table td, th { border-bottom: 1px solid #ddd; } -.myTable tr:hover {background-color:#f5f5f5;} +div.article-post>table tr:hover {background-color:#f5f5f5;}