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 1 commit
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
164 changes: 164 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">.custom-borders</code> with <code>&lt;table&gt;</code>
tag, to begin with a table without any border. The classes
<code>border-&lt;position&gt;</code> and <code>heavy-border-&lt;position&gt;</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="custom-borders ..."&gt;
&lt;tr class="border-bottom"&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"&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>l1-l12</code>, <code>c1-c12</code>,
<code>r1-r12</code>. For example, a table with 3 columns using the following
classes
</p>
<pre><code class="language-html">&lt;table class="l1 c2 r3"&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,127 @@ <h3 id="tables">Tables</h3>
</table>
</div>

<table class="custom-borders c1 c2 c3 c4 c5 c6 c7 c8">
<caption>Example table with custom borders and aligment</caption>
<colgroup>
<col class="border-right">
<col class="border-right">
<col class="border-right">
<col class="border-right">
<col class="border-right">
<col class="border-right">
<col class="heavy-border-right">
<col>
</colgroup>
<tr>
<th scope="col" colspan="7"></th>
<th>DeMorgan's Law</th>
</tr>
<tr class="border-bottom">
<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>
<td>$\lnot P \lor \lnot Q \iff \lnot (P \land Q)$</td>
</tr>
<tr class="border-bottom">
<td rowspan="2">T</td>
<td>T</td>
<td rowspan="2">F</td>
<td>F</td>
<td>T</td>
<td>F</td>
<td>F</td>
<td>T</td>
vincentdoerig marked this conversation as resolved.
Show resolved Hide resolved
</tr>
<tr class="border-bottom">
<td>F</td>
<td>T</td>
<td>F</td>
<td>T</td>
<td>T</td>
<td>T</td>
</tr>
<tr class="border-bottom">
<td rowspan="2">F</td>
<td>T</td>
<td rowspan="2">T</td>
<td>F</td>
<td>F</td>
<td>T</td>
<td>T</td>
<td>T</td>
</tr>
<tr>
<td>F</td>
<td>T</td>
<td>F</td>
<td>T</td>
<td>T</td>
<td>T</td>
</tr>
</table>

<table class="custom-borders l1 c2 c3 r4">
<caption>Close approaches to the Earth by NEOs</caption>
<thead>
<tr class="heavy-border-bottom">
<th>CA Date</th>
<th>Object Name</th>
<th>Diameter</th>
<th>Dist. Min. (LD)</th>
</tr>
</thead>
<tbody>
vincentdoerig marked this conversation as resolved.
Show resolved Hide resolved
<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>
<tr></tr>
vincentdoerig marked this conversation as resolved.
Show resolved Hide resolved
</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
96 changes: 89 additions & 7 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;
--light-rule-width: 1.36px;
--heavy-rule-width: 2.27px;
vincentdoerig marked this conversation as resolved.
Show resolved Hide resolved
--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,7 +298,7 @@ kbd {
}

/* Better tables */
table {
table:not(.custom-borders) {
vincentdoerig marked this conversation as resolved.
Show resolved Hide resolved
border-collapse: collapse;
border-spacing: 0;
width: auto;
Expand All @@ -309,19 +311,19 @@ table {
counter-increment: caption;
}
/* add bottom border on column table headings */
table tr > th[scope='col'] {
table:not(.custom-borders) tr > th[scope='col'] {
border-bottom: 1.36px solid var(--table-border-color);
vincentdoerig marked this conversation as resolved.
Show resolved Hide resolved
}
/* add right border on row table headings */
table tr > th[scope='row'] {
table:not(.custom-borders) tr > th[scope='row'] {
border-right: 1.36px solid var(--table-border-color);
}
table > tbody > tr:first-child > td,
table > tbody > tr:first-child > th {
table:not(.custom-borders) > tbody > tr:first-child > td,
table:not(.custom-borders) > tbody > tr:first-child > th {
border-top: 1.36px solid var(--table-border-color);
}
table > tbody > tr:last-child > td,
table > tbody > tr:last-child > th {
table:not(.custom-borders) > tbody > tr:last-child > td,
table:not(.custom-borders) > tbody > tr:last-child > th {
border-bottom: 1.36px solid var(--table-border-color);
}

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

/* Table custom borders */
table.custom-borders {
border-collapse: collapse;
border-spacing: 0;
width: auto;
max-width: 100%;
overflow-x: auto; /* does not work because element is not block */
vincentdoerig marked this conversation as resolved.
Show resolved Hide resolved
counter-increment: caption;
}

.heavy-border-top {
vincentdoerig marked this conversation as resolved.
Show resolved Hide resolved
border-top: var(--heavy-rule-width) solid var(--table-border-color);
}
.heavy-border-right {
border-right: var(--heavy-rule-width) solid var(--table-border-color);
}
.heavy-border-bottom {
border-bottom: var(--heavy-rule-width) solid var(--table-border-color);
}
.heavy-border-left {
border-left: var(--heavy-rule-width) solid var(--table-border-color);
}

.border-top {
vincentdoerig marked this conversation as resolved.
Show resolved Hide resolved
border-top: var(--light-rule-width) solid var(--table-border-color);
}
.border-right {
border-right: var(--light-rule-width) solid var(--table-border-color);
}
.border-bottom {
border-bottom: var(--light-rule-width) solid var(--table-border-color);
}
.border-left {
border-left: var(--light-rule-width) solid var(--table-border-color);
}

/* Table column alignment */
.l1 tr > :nth-child(1),
.l2 tr > :nth-child(2),
.l3 tr > :nth-child(3),
.l4 tr > :nth-child(4),
.l5 tr > :nth-child(5),
.l6 tr > :nth-child(6),
.l7 tr > :nth-child(7),
.l8 tr > :nth-child(8),
.l9 tr > :nth-child(9),
.l10 tr > :nth-child(10),
.l11 tr > :nth-child(11),
.l12 tr > :nth-child(12) {
text-align: left;
}
.c1 tr > :nth-child(1),
.c2 tr > :nth-child(2),
.c3 tr > :nth-child(3),
.c4 tr > :nth-child(4),
.c5 tr > :nth-child(5),
.c6 tr > :nth-child(6),
.c7 tr > :nth-child(7),
.c8 tr > :nth-child(8),
.c9 tr > :nth-child(9),
.c10 tr > :nth-child(10),
.c11 tr > :nth-child(11),
.c12 tr > :nth-child(12) {
text-align: center;
}
.r1 tr > :nth-child(1),
.r2 tr > :nth-child(2),
.r3 tr > :nth-child(3),
.r4 tr > :nth-child(4),
.r5 tr > :nth-child(5),
.r6 tr > :nth-child(6),
.r7 tr > :nth-child(7),
.r8 tr > :nth-child(8),
.r9 tr > :nth-child(9),
.r10 tr > :nth-child(10),
.r11 tr > :nth-child(11),
.r12 tr > :nth-child(12) {
text-align: right;
}

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