mirror of
https://github.com/vincentdoerig/latex-css.git
synced 2024-08-16 08:10:35 +03:00
Improve table styles (#24)
This commit is contained in:
Vincent Dörig
GitHub
parent
0cb6b6c271
commit
04497134ca
93
index.html
93
index.html
@ -43,7 +43,7 @@
|
||||
</div>
|
||||
|
||||
<nav role="navigation" class="toc">
|
||||
<h3>Contents</h3>
|
||||
<h2>Contents</h2>
|
||||
<ol>
|
||||
<li><a href="#getting-started">Getting Started</a></li>
|
||||
<li>
|
||||
@ -215,6 +215,7 @@
|
||||
|
||||
<h3 id="tables">Tables</h3>
|
||||
<table>
|
||||
<caption>A sample table with a descriptive caption.</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Header 1</th>
|
||||
@ -248,6 +249,83 @@
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<table>
|
||||
<caption>
|
||||
Example table taken from <a href="https://texdoc.net/texmf-dist/doc/latex/booktabs/booktabs.pdf">this
|
||||
paper</a> on how to produce quality tables with LaTeX.
|
||||
</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th colspan="2" scope="col">Item</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Animal</th>
|
||||
<th>Description</th>
|
||||
<th>Price ($)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Gnat</td>
|
||||
<td>per gram</td>
|
||||
<td>13.65</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gnu</td>
|
||||
<td>stuffed</td>
|
||||
<td>92.50</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Emu</td>
|
||||
<td>stuffed</td>
|
||||
<td>33.33</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Armadillo</td>
|
||||
<td>frozen</td>
|
||||
<td>8.99</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div class="scroll-wrapper">
|
||||
<table>
|
||||
<caption>Color names and values.</caption>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="col">Name</th>
|
||||
<th scope="col">HEX</th>
|
||||
<th scope="col">HSL</th>
|
||||
<th scope="col">RGB</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row" style="color: teal;">Teal</th>
|
||||
<td><code>#008080</code></td>
|
||||
<td><code>hsl(180, 100%, 25%)</code></td>
|
||||
<td><code>rgb(0, 128, 128)</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row" style="color: goldenrod;">Goldenrod</th>
|
||||
<td><code>#daa520</code></td>
|
||||
<td><code>hsl(43, 74%, 49%)</code></td>
|
||||
<td><code>rgb(218, 165, 32)</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row" style="color: cornflowerblue;">Cornflowerblue</th>
|
||||
<td><code>#6495ed</code></td>
|
||||
<td><code>hsl(219, 79%, 66%)</code></td>
|
||||
<td><code>rgb(100, 149, 237)</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row" style="color: lightcoral;">Lightcoral</th>
|
||||
<td><code>#f08080</code></td>
|
||||
<td><code>hsl(0, 79%, 72%)</code></td>
|
||||
<td><code>rgb(240, 128, 128)</code></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<h3 id="images">Images</h3>
|
||||
<figure>
|
||||
<img src="https://images.unsplash.com/photo-1477346611705-65d1883cee1e?auto=format&fit=crop&w=1000&q=80"
|
||||
@ -258,6 +336,19 @@
|
||||
</figcaption>
|
||||
</figure>
|
||||
|
||||
<h2>Miscellaneous</h2>
|
||||
|
||||
<h3>Scroll overflow</h3>
|
||||
<p>It is best to break up long equations into smaller parts, but when this isn't possible, consider wrapping the
|
||||
overflowing element with a class of <code>scroll-overflow</code> to
|
||||
allow scrolling on the x-axis. Large tables should also be wrapped with this class.</p>
|
||||
<p>Below is an example of a long equation with overflow scroll.</p>
|
||||
<div class="scroll-wrapper">
|
||||
$$(1+x)^{n}=1+n x+\frac{n(n-1)}{2 !} x^{2}+\frac{n(n-1)(n-2)}{3 !} x^{3}+\frac{n(n-1)(n-2)(n-3)}{4 !}
|
||||
x^{4}+\frac{n(n-1)(n-2)(n-3)(n-4)}{5 !}
|
||||
x^{5}+\ldots$$
|
||||
</div>
|
||||
|
||||
<div class="footnotes">
|
||||
<p id="fn1">
|
||||
1. From
|
||||
|
||||
57
style.css
57
style.css
@ -122,6 +122,7 @@ a:focus {
|
||||
/* Make images easier to work with */
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
@ -170,26 +171,66 @@ kbd {
|
||||
font-size: 75%;
|
||||
}
|
||||
|
||||
/* Make table 100% width, add borders between rows */
|
||||
/* Better tables */
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
width: 100%;
|
||||
width: auto;
|
||||
max-width: 100%;
|
||||
border-top: 2.27px solid black;
|
||||
border-bottom: 2.27px solid black;
|
||||
/* 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 black;
|
||||
}
|
||||
/* add right border on row table headings */
|
||||
table tr > th[scope='row'] {
|
||||
border-right: 1.36px solid black;
|
||||
}
|
||||
table > tbody > tr:first-child > td,
|
||||
table > tbody > tr:first-child > th {
|
||||
border-top: 1.36px solid black;
|
||||
}
|
||||
table > tbody > tr:last-child > td,
|
||||
table > tbody > tr:last-child > th {
|
||||
border-bottom: 1.36px solid black;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
text-align: left;
|
||||
padding: 0.5rem;
|
||||
line-height: 1.1;
|
||||
}
|
||||
td {
|
||||
border-bottom: 1px solid hsl(0, 0%, 85%);
|
||||
/* Table caption */
|
||||
caption {
|
||||
text-align: left;
|
||||
font-size: 0.923em;
|
||||
/* border-bottom: 2pt solid #000; */
|
||||
padding: 0 0.25em 0.25em;
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
}
|
||||
thead th {
|
||||
border-bottom: 2px solid hsl(0, 0%, 70%);
|
||||
|
||||
caption::before {
|
||||
content: 'Table ' counter(caption) '. ';
|
||||
font-weight: bold;
|
||||
}
|
||||
tfoot th {
|
||||
border-top: 2px solid hsl(0, 0%, 70%);
|
||||
|
||||
/* allow scroll on the x-axis */
|
||||
.scroll-wrapper {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
/* if a table is wrapped in a scroll wrapper,
|
||||
the table cells shouldn't wrap */
|
||||
.scroll-wrapper > table td {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Center align the title */
|
||||
|
||||
2
style.min.css
vendored
2
style.min.css
vendored
@ -3,4 +3,4 @@
|
||||
*
|
||||
* Source: https://github.com/vincentdoerig/latex-css
|
||||
* Licensed under MIT (https://github.com/vincentdoerig/latex-css/blob/master/LICENSE)
|
||||
*/@font-face{font-family:'Latin Modern';font-style:normal;font-weight:normal;font-display:swap;src:url('./fonts/LM-regular.woff2') format('woff2'),url('./fonts/LM-regular.woff') format('woff'),url('./fonts/LM-regular.ttf') format('truetype')}@font-face{font-family:'Latin Modern';font-style:italic;font-weight:normal;font-display:swap;src:url('./fonts/LM-italic.woff2') format('woff2'),url('./fonts/LM-italic.woff') format('woff'),url('./fonts/LM-italic.ttf') format('truetype')}@font-face{font-family:'Latin Modern';font-style:normal;font-weight:bold;font-display:swap;src:url('./fonts/LM-bold.woff2') format('woff2'),url('./fonts/LM-bold.woff') format('woff'),url('./fonts/LM-bold.ttf') format('truetype')}@font-face{font-family:'Latin Modern';font-style:italic;font-weight:bold;font-display:swap;src:url('./fonts/LM-bold-italic.woff2') format('woff2'),url('./fonts/LM-bold-italic.woff') format('woff'),url('./fonts/LM-bold-italic.ttf') format('truetype')}*,*::before,*::after{box-sizing:border-box}body,h1,h2,h3,h4,p,ul[class],ol[class],li,figure,figcaption,dl,dd{margin:0}html{font-size:1rem;scroll-behavior:smooth}body{font-family:'Latin Modern',Georgia,Cambria,'Times New Roman',Times,serif;line-height:1.8;max-width:80ch;min-height:100vh;overflow-x:hidden;margin:0 auto;padding:2rem 1.25rem;counter-reset:theorem;counter-reset:definition;color:hsl(0,5%,10%);background-color:hsl(210,20%,98%);text-rendering:optimizeLegibility}p{text-align:justify;hyphens:auto;-webkit-hyphens:auto;-moz-hyphens:auto;margin-top:1rem}a:not([class]){text-decoration-skip-ink:auto}a,a:visited{color:#a00}a:focus{outline-offset:2px;outline:2px solid hsl(220,90%,52%)}img{max-width:100%;display:block}input,button,textarea,select{font:inherit}textarea{width:100%}article>*+*{margin-top:1em}code,pre,kbd{font-family:Menlo,Monaco,Consolas,'Liberation Mono','Courier New',monospace;font-size:85%}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto;border-radius:4px;background:hsl(210,28%,93%)}pre code{font-size:95%;position:relative}kbd{background:hsl(210,5%,100%);border:1px solid hsl(210,5%,70%);border-radius:2px;padding:2px 4px;font-size:75%}table{border-collapse:collapse;border-spacing:0;width:100%;max-width:100%}th,td{text-align:left;padding:.5rem}td{border-bottom:1px solid hsl(0,0%,85%)}thead th{border-bottom:2px solid hsl(0,0%,70%)}tfoot th{border-top:2px solid hsl(0,0%,70%)}h1:first-child{text-align:center}nav ol{counter-reset:item;padding-left:2rem}nav li{display:block}nav li:before{content:counters(item,'.') ' ';counter-increment:item;padding-right:.85rem}dl dd{text-align:center}.theorem{counter-increment:theorem;display:block;margin:12px 0;font-style:italic}.theorem::before{content:'Theorem ' counter(theorem) '. ';font-weight:bold;font-style:normal}.lemma{counter-increment:theorem;display:block;margin:12px 0;font-style:italic}.lemma::before{content:'Lemma ' counter(theorem) '. ';font-weight:bold;font-style:normal}.proof{display:block;margin:12px 0;font-style:normal;position:relative}.proof::before{content:'Proof. ' attr(title);font-style:italic}.proof:after{content:'◾️';position:absolute;right:-12px;bottom:-2px}.definition{counter-increment:definition;display:block;margin:12px 0;font-style:normal}.definition::before{content:'Definition ' counter(definition) '. ';font-weight:bold;font-style:normal}.author{margin:.85rem 0;font-variant-caps:small-caps;text-align:center}.footnotes p{text-align:left;line-height:1.5;font-size:85%;margin-bottom:.4rem}.footnotes{border-top:1px solid hsl(0,0%,39%)}.abstract,.abstract p{text-align:center;margin-top:0}.abstract{margin:2.25rem 0}.abstract>h2{font-size:1rem;margin-bottom:-0.2rem}.latex span:nth-child(1){text-transform:uppercase;font-size:.75em;vertical-align:.28em;margin-left:-0.48em;margin-right:-0.15em;line-height:1ex}.latex span:nth-child(2){text-transform:uppercase;vertical-align:-0.5ex;margin-left:-0.1667em;margin-right:-0.125em;line-height:1ex}h1{font-size:2.5rem;line-height:3.25rem;margin-bottom:1.625rem}h2{font-size:1.7rem;line-height:2rem;margin-top:3rem}h3{font-size:1.4rem;margin-top:2.5rem}h4{font-size:1.2rem;margin-top:2rem}h5{font-size:1rem;margin-top:1.8rem}h6{font-size:1rem;font-style:italic;font-weight:normal;margin-top:2.5rem}h3,h4,h5,h6{line-height:1.625rem}h1+h2{margin-top:1.625rem}h2+h3,h3+h4,h4+h5{margin-top:.8rem}h5+h6{margin-top:-0.8rem}h2,h3,h4,h5,h6{margin-bottom:.8rem}
|
||||
*/@font-face{font-family:'Latin Modern';font-style:normal;font-weight:normal;font-display:swap;src:url('./fonts/LM-regular.woff2') format('woff2'),url('./fonts/LM-regular.woff') format('woff'),url('./fonts/LM-regular.ttf') format('truetype')}@font-face{font-family:'Latin Modern';font-style:italic;font-weight:normal;font-display:swap;src:url('./fonts/LM-italic.woff2') format('woff2'),url('./fonts/LM-italic.woff') format('woff'),url('./fonts/LM-italic.ttf') format('truetype')}@font-face{font-family:'Latin Modern';font-style:normal;font-weight:bold;font-display:swap;src:url('./fonts/LM-bold.woff2') format('woff2'),url('./fonts/LM-bold.woff') format('woff'),url('./fonts/LM-bold.ttf') format('truetype')}@font-face{font-family:'Latin Modern';font-style:italic;font-weight:bold;font-display:swap;src:url('./fonts/LM-bold-italic.woff2') format('woff2'),url('./fonts/LM-bold-italic.woff') format('woff'),url('./fonts/LM-bold-italic.ttf') format('truetype')}*,*::before,*::after{box-sizing:border-box}body,h1,h2,h3,h4,p,ul[class],ol[class],li,figure,figcaption,dl,dd{margin:0}html{font-size:1rem;scroll-behavior:smooth}body{font-family:'Latin Modern',Georgia,Cambria,'Times New Roman',Times,serif;line-height:1.8;max-width:80ch;min-height:100vh;overflow-x:hidden;margin:0 auto;padding:2rem 1.25rem;counter-reset:theorem;counter-reset:definition;color:hsl(0,5%,10%);background-color:hsl(210,20%,98%);text-rendering:optimizeLegibility}p{text-align:justify;hyphens:auto;-webkit-hyphens:auto;-moz-hyphens:auto;margin-top:1rem}a:not([class]){text-decoration-skip-ink:auto}a,a:visited{color:#a00}a:focus{outline-offset:2px;outline:2px solid hsl(220,90%,52%)}img{max-width:100%;height:auto;display:block}input,button,textarea,select{font:inherit}textarea{width:100%}article>*+*{margin-top:1em}code,pre,kbd{font-family:Menlo,Monaco,Consolas,'Liberation Mono','Courier New',monospace;font-size:85%}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto;border-radius:4px;background:hsl(210,28%,93%)}pre code{font-size:95%;position:relative}kbd{background:hsl(210,5%,100%);border:1px solid hsl(210,5%,70%);border-radius:2px;padding:2px 4px;font-size:75%}table{border-collapse:collapse;border-spacing:0;width:auto;max-width:100%;border-top:2.27px solid black;border-bottom:2.27px solid black;overflow-x:auto;counter-increment:caption}table tr>th[scope='col']{border-bottom:1.36px solid black}table tr>th[scope='row']{border-right:1.36px solid black}table>tbody>tr:first-child>td,table>tbody>tr:first-child>th{border-top:1.36px solid black}table>tbody>tr:last-child>td,table>tbody>tr:last-child>th{border-bottom:1.36px solid black}th,td{text-align:left;padding:.5rem;line-height:1.1}caption{text-align:left;font-size:.923em;padding:0 .25em .25em;width:100%;margin-left:0}caption::before{content:'Table ' counter(caption) '. ';font-weight:bold}.scroll-wrapper{overflow-x:auto}.scroll-wrapper>table td{white-space:nowrap}h1:first-child{text-align:center}nav ol{counter-reset:item;padding-left:2rem}nav li{display:block}nav li:before{content:counters(item,'.') ' ';counter-increment:item;padding-right:.85rem}dl dd{text-align:center}.theorem{counter-increment:theorem;display:block;margin:12px 0;font-style:italic}.theorem::before{content:'Theorem ' counter(theorem) '. ';font-weight:bold;font-style:normal}.lemma{counter-increment:theorem;display:block;margin:12px 0;font-style:italic}.lemma::before{content:'Lemma ' counter(theorem) '. ';font-weight:bold;font-style:normal}.proof{display:block;margin:12px 0;font-style:normal;position:relative}.proof::before{content:'Proof. ' attr(title);font-style:italic}.proof:after{content:'◾️';position:absolute;right:-12px;bottom:-2px}.definition{counter-increment:definition;display:block;margin:12px 0;font-style:normal}.definition::before{content:'Definition ' counter(definition) '. ';font-weight:bold;font-style:normal}.author{margin:.85rem 0;font-variant-caps:small-caps;text-align:center}.footnotes p{text-align:left;line-height:1.5;font-size:85%;margin-bottom:.4rem}.footnotes{border-top:1px solid hsl(0,0%,39%)}.abstract,.abstract p{text-align:center;margin-top:0}.abstract{margin:2.25rem 0}.abstract>h2{font-size:1rem;margin-bottom:-0.2rem}.latex span:nth-child(1){text-transform:uppercase;font-size:.75em;vertical-align:.28em;margin-left:-0.48em;margin-right:-0.15em;line-height:1ex}.latex span:nth-child(2){text-transform:uppercase;vertical-align:-0.5ex;margin-left:-0.1667em;margin-right:-0.125em;line-height:1ex}h1{font-size:2.5rem;line-height:3.25rem;margin-bottom:1.625rem}h2{font-size:1.7rem;line-height:2rem;margin-top:3rem}h3{font-size:1.4rem;margin-top:2.5rem}h4{font-size:1.2rem;margin-top:2rem}h5{font-size:1rem;margin-top:1.8rem}h6{font-size:1rem;font-style:italic;font-weight:normal;margin-top:2.5rem}h3,h4,h5,h6{line-height:1.625rem}h1+h2{margin-top:1.625rem}h2+h3,h3+h4,h4+h5{margin-top:.8rem}h5+h6{margin-top:-0.8rem}h2,h3,h4,h5,h6{margin-bottom:.8rem}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user