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

feat: add custom table borders and column alignment #60

Merged
merged 6 commits into from
Sep 22, 2023
Merged

feat: add custom table borders and column alignment #60

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
2616929
feat: add custom table borders and column alignment
vihuna Sep 9, 2023
5465bea
fix: rename class names following CSS conventions
vihuna Sep 18, 2023
f48d789
refactor: replace border width values with variables
vihuna Sep 18, 2023
15cee77
fix: corrects formatting, clean up comments
vihuna Sep 18, 2023
d9cb53d
fix: rename column aligment CSS classes for tables
vihuna Sep 20, 2023
0e72d64
fix: reformat De Morgan's truth table
vihuna Sep 20, 2023
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
160 changes: 160 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,12 @@ <h2>Contents</h2>
</ol>
</li>
<li><a href="#paragraphs">Paragraphs</a></li>
<li><a href="#table-classes">Table classes</a>
<ol>
<li><a href="#table-borders">Custom table borders</a></li>
<li><a href="#table-column-aligment">Table column alignment</a></li>
</ol>
</li>
</ol>
</li>
<li><a href="#language-support">Language Support</a></li>
Expand Down Expand Up @@ -203,6 +209,43 @@ <h3 id="paragraphs">Paragraphs</h3>
To avoid first line indentation of some specific paragraph, the class <code>no-indent</code>
can be used.</p>
<pre><code class="language-html">&lt;p class="no-indent"&gt;...&lt;/p&gt;</code></pre>
<h3 id="table-classes">Table classes</h3>
<h4 id="table-borders">Custom table borders</h4>
<p>
To add custom borders to the table, you should use the class
<code class="language-html">borders-custom</code> with <code>&lt;table&gt;</code>
tag, to begin with a table without any border. The classes
<code>border-&lt;position&gt;-thin</code> and <code>border-&lt;position&gt;-thick</code>,
are available, where <code>&lt;position&gt;</code> can take one of the values:
<code>top</code>, <code>right</code>, <code>bottom</code>, <code>left</code>.
</p>
<pre><code class="language-html">&lt;table class="borders-custom ..."&gt;
&lt;tr class="border-bottom-thick"&gt;
&lt;td&gt;...&lt;/td&gt;&lt;td&gt;...&lt;/td&gt;&lt;td&gt;...&lt;/td&gt;
&lt;/tr&gt;
&lt;tr class="border-bottom-thin"&gt;
&lt;td&gt;...&lt;/td&gt;&lt;td&gt;...&lt;/td&gt;&lt;td&gt;...&lt;/td&gt;
&lt;/tr&gt;
...</code></pre>
<p>See full examples in <a href="#tables">section about tables</a>.</p>
<h4 id="table-column-aligment">Table column alignment</h4>
<p>
For each column of the table, there is one class for left, center or right
alignment, up to 12 columns: <code>col-n-l</code>, <code>col-n-c</code>,
<code>col-n-r</code>, <code>n</code>=1, ...,12. For example, a table with 3 columns
using the following classes
</p>
<pre><code class="language-html">&lt;table class="col-1-l col-2-c col-3-r"&gt;
&lt;tr&gt;
&lt;td&gt;...&lt;/td&gt;&lt;td&gt;...&lt;/td&gt;&lt;td&gt;...&lt;/td&gt;
&lt;/tr&gt;
...</code></pre>
<p>
aligns to the left the first column, centers the second one and aligns to the
right the third of the columns.
</p>

<p>See full examples in <a href="#tables">section about tables</a>.</p>

<h2 id="language-support">Language Support</h2>
<p>
Expand Down Expand Up @@ -433,6 +476,123 @@ <h3 id="tables">Tables</h3>
</table>
</div>

<table class="borders-custom col-1-c col-2-c col-3-c col-4-c col-5-c col-6-c
col-7-c col-8-c">
<caption>Example table with custom borders and aligment</caption>
<colgroup>
<col class="border-left-thin border-right-thin">
<col class="border-right-thin">
<col class="border-right-thin">
<col class="border-right-thin">
<col class="border-right-thick">
<col class="border-right-thin">
<col class="border-right-thin">
</colgroup>
<tr class="border-top-thin">
<th scope="col" colspan="7">De Morgan's Law: $\lnot P \lor \lnot Q \iff \lnot (P \land Q)$</th>
</tr>
<tr>
<th scope="col" colspan="7" class="border-bottom-thin">TRUTH TABLE</th>
</tr>
<tr class="border-bottom-thin">
<td>$P$</td>
<td>$Q$</td>
<td>$\lnot P$</td>
<td>$\lnot Q$</td>
<td>$P \land Q$</td>
<td>$\lnot P \lor \lnot Q$</td>
<td>$\lnot (P \land Q)$</td>
</tr>
<tr class="border-bottom-thin">
<td rowspan="2">T</td>
<td>T</td>
<td rowspan="2">F</td>
<td>F</td>
<td>T</td>
<td><strong>F</strong></td>
<td><strong>F</strong></td>
</tr>
<tr class="border-bottom-thin">
<td>F</td>
<td>T</td>
<td>F</td>
<td><strong>T</strong></td>
<td><strong>T</strong></td>
</tr>
<tr class="border-bottom-thin">
<td rowspan="2">F</td>
<td>T</td>
<td rowspan="2">T</td>
<td>F</td>
<td>F</td>
<td><strong>T</strong></td>
<td><strong>T</strong></td>
</tr>
<tr class="border-bottom-thin">
<td>F</td>
<td>T</td>
<td>F</td>
<td><strong>T</strong></td>
<td><strong>T</strong></td>
</tr>
</table>

<table class="borders-custom col-1-l col-2-c col-3-c col-4-r">
<caption>Close approaches to the Earth by NEOs</caption>
<thead>
<tr class="border-bottom-thick">
<th>CA Date</th>
<th>Object Name</th>
<th>Diameter</th>
<th>Dist. Min. (LD)</th>
</tr>
</thead>
<tbody>
<tr>
<td>2023-Jul-10</td>
<td>2018 NW</td>
<td>7.3m-16m</td>
<td>0.287</td>
</tr>
<tr>
<td>2023-Jul-10</td>
<td>2023 LN1</td>
<td>45m-00m</td>
<td>17.813</td>
</tr>
<tr>
<td>2023-Jul-11</td>
<td>2023 MD2</td>
<td>36m-80m</td>
<td>5.570</td>
</tr>
<tr>
<td>2023-Jul-11</td>
<td>2023 NE</td>
<td>32m-70m</td>
<td>11.253</td>
</tr>
<tr>
<td>2023-Jul-11</td>
<td>2023 MQ1</td>
<td>28m-62m</td>
<td>10.716</td>
</tr>
<tr>
<td>2023-Jul-12</td>
<td>2023 OM</td>
<td>20m-46m</td>
<td>7.628</td>
</tr>
<tr>
<td>2023-Jul-12</td>
<td>2018 UY</td>
<td>190m-420m</td>
<td>7.412</td>
</tr>
</tbody>
</table>

<h3 id="images">Images</h3>
<figure>
<img src="https://images.unsplash.com/photo-1477346611705-65d1883cee1e?auto=format&fit=crop&w=1000&q=80"
Expand Down
108 changes: 95 additions & 13 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,6 +109,8 @@
--kbd-bg-color: hsl(210, 5%, 100%);
--kbd-border-color: hsl(210, 5%, 70%);
--table-border-color: black;
--border-width-thin: 1.36px;
--border-width-thick: 2.27px;
--sidenote-target-border-color: hsl(55, 55%, 70%);
--footnotes-border-color: hsl(0, 0%, 39%);
--text-indent-size: 1.463rem; /* In 12pt [Latin Modern font] LaTeX article
Expand Down Expand Up @@ -296,33 +298,33 @@ kbd {
}

/* Better tables */
table {
table:not(.borders-custom) {
border-collapse: collapse;
border-spacing: 0;
width: auto;
max-width: 100%;
border-top: 2.27px solid var(--table-border-color);
border-bottom: 2.27px solid var(--table-border-color);
border-top: var(--border-width-thick) solid var(--table-border-color);
border-bottom: var(--border-width-thick) solid var(--table-border-color);
/* display: block; */
overflow-x: auto; /* does not work because element is not block */
/* white-space: nowrap; */
counter-increment: caption;
}
/* add bottom border on column table headings */
table tr > th[scope='col'] {
border-bottom: 1.36px solid var(--table-border-color);
table:not(.borders-custom) tr > th[scope='col'] {
border-bottom: var(--border-width-thin) solid var(--table-border-color);
}
/* add right border on row table headings */
table tr > th[scope='row'] {
border-right: 1.36px solid var(--table-border-color);
table:not(.borders-custom) tr > th[scope='row'] {
border-right: var(--border-width-thin) solid var(--table-border-color);
}
table > tbody > tr:first-child > td,
table > tbody > tr:first-child > th {
border-top: 1.36px solid var(--table-border-color);
table:not(.borders-custom) > tbody > tr:first-child > td,
table:not(.borders-custom) > tbody > tr:first-child > th {
border-top: var(--border-width-thin) solid var(--table-border-color);
}
table > tbody > tr:last-child > td,
table > tbody > tr:last-child > th {
border-bottom: 1.36px solid var(--table-border-color);
table:not(.borders-custom) > tbody > tr:last-child > td,
table:not(.borders-custom) > tbody > tr:last-child > th {
border-bottom: var(--border-width-thin) solid var(--table-border-color);
}

th,
Expand Down Expand Up @@ -357,6 +359,86 @@ caption::before {
white-space: nowrap;
}

/* Table custom borders */
table.borders-custom {
border-collapse: collapse;
border-spacing: 0;
width: auto;
max-width: 100%;
overflow-x: auto;
counter-increment: caption;
}

.border-top-thick {
border-top: var(--border-width-thick) solid var(--table-border-color);
}
.border-right-thick {
border-right: var(--border-width-thick) solid var(--table-border-color);
}
.border-bottom-thick {
border-bottom: var(--border-width-thick) solid var(--table-border-color);
}
.border-left-thick {
border-left: var(--border-width-thick) solid var(--table-border-color);
}

.border-top-thin {
border-top: var(--border-width-thin) solid var(--table-border-color);
}
.border-right-thin {
border-right: var(--border-width-thin) solid var(--table-border-color);
}
.border-bottom-thin {
border-bottom: var(--border-width-thin) solid var(--table-border-color);
}
.border-left-thin {
border-left: var(--border-width-thin) solid var(--table-border-color);
}

/* Table column alignment */
.col-1-l tr > :nth-child(1),
.col-2-l tr > :nth-child(2),
.col-3-l tr > :nth-child(3),
.col-4-l tr > :nth-child(4),
.col-5-l tr > :nth-child(5),
.col-6-l tr > :nth-child(6),
.col-7-l tr > :nth-child(7),
.col-8-l tr > :nth-child(8),
.col-9-l tr > :nth-child(9),
.col-10-l tr > :nth-child(10),
.col-11-l tr > :nth-child(11),
.col-12-l tr > :nth-child(12) {
text-align: left;
}
.col-1-c tr > :nth-child(1),
.col-2-c tr > :nth-child(2),
.col-3-c tr > :nth-child(3),
.col-4-c tr > :nth-child(4),
.col-5-c tr > :nth-child(5),
.col-6-c tr > :nth-child(6),
.col-7-c tr > :nth-child(7),
.col-8-c tr > :nth-child(8),
.col-9-c tr > :nth-child(9),
.col-10-c tr > :nth-child(10),
.col-11-c tr > :nth-child(11),
.col-12-c tr > :nth-child(12) {
text-align: center;
}
.col-1-r tr > :nth-child(1),
.col-2-r tr > :nth-child(2),
.col-3-r tr > :nth-child(3),
.col-4-r tr > :nth-child(4),
.col-5-r tr > :nth-child(5),
.col-6-r tr > :nth-child(6),
.col-7-r tr > :nth-child(7),
.col-8-r tr > :nth-child(8),
.col-9-r tr > :nth-child(9),
.col-10-r tr > :nth-child(10),
.col-11-r tr > :nth-child(11),
.col-12-r tr > :nth-child(12) {
text-align: right;
}

/* Center align the title */
h1:first-child {
text-align: center;
Expand Down