Skip to content

Commit

Permalink
feat: add custom table borders and column alignment (#60)
Browse files Browse the repository at this point in the history 
Allow some few customization options for table borders and column alignment.

- For custom borders: adds classes `border-<position>-<weight>` for `top`, `right`, `top`, `bottom` and `thin`/`thick` respectively. Use with the `borders-custom` class.
- For custom column alignment: adds classes `col-<num>-l`, `col-<num>-c`, `col-<num>-r` for `num` being the n-th column of the table from 1 to 12.
  • Loading branch information
@vihuna
vihuna authored Sep 22, 2023
1 parent 30a022e commit b2975d2
Show file tree
Hide file tree
Showing 2 changed files with 255 additions and 13 deletions.
160 changes: 160 additions & 0 deletions index.html
View file
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
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

1 comment on commit b2975d2

@vercel
Copy link

@vercel vercel bot commented on b2975d2 Sep 22, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

latex-css – ./

latex.vercel.app
latex-css-vincentdoerig.vercel.app
latex-css-git-master-vincentdoerig.vercel.app

Please # to comment.