Hi everybody. I’m working on the SVG Cheatsheet for my SVG thread and I must have spent hours trying to understand why the table doesn’t fill 100% of the width of the screen. This is a basic 2-Column table in which the first column is a number and the second is the actual code. I’ve severely cut this down to a size that’s manageable for the demo.
Any help much appreciated. 
<!DOCTYPE html>
<HTML LANG="en">
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Calistoga&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Crete+Round:ital@0;1&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Fira+Sans+Extra+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Goudy+Bookletter+1911&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Henny+Penny&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Solway:wght@300;400;500;700;800&display=swap" rel="stylesheet">
<title>ASIDE: ANATOMY OF AN SVG ᰄ by semicodin</title>
<style>
body {
width: 1080px;
background-color: white;
margin: 0 auto;
color: black;
font-family: 'roboto', sans-serif;
font-weight: 700;
font-size: 2.5rem;
line-height: 2.63rem;
}
.plead {margin-top: 2rem}
u {text-decoration: underline}
* {box-sizing: border-box}
.ctr {text-align: center; margin-top: 0;}
.blu {color: blue}
.crim {color: crimson}
.green {color: green}
.mono {color: blue; font-family: 'courier prime', monospace; font-weight: bold;}
.goudy {font-family: 'goudy bookletter 1911', serif; font-weight: bold;}
.aside {
padding: 0rem 5rem 3rem 6rem;
background-repeat: no-repeat;
background-image: URL(https://lh3.googleusercontent.com/pw/AP1GczNPnvRmkw7B_BtAETrIfHBMaD58R4JqLJIF1lcjuelu3735vVmaLkTR-fcOuYC-UyBxelTjm55cElBq5nvDrg4lbJASuq2k3TpVE_J4htMz9Sr_5w=w1080-h1730);
}
.leada {
padding-top: 6rem;
color: black;
text-align: center;
font-style: normal;
font-family: 'crete round', serif;
font-size: 3.5rem;
line-height: 1.1;
font-weight: bold;
}
.leadb {
padding-top: 2.75rem;
width: auto;
color: white;
text-align: center;
font-style: normal;
font-family: 'crete round', serif;
font-size: 4rem;
line-height: 4.25rem;
font-weight: bold;
}
.intro1 {
margin-top: 1.5rem;
text-align: left;
font-family: 'roboto condensed';
font-size: 2.5rem;
line-height: 1.1;
font-weight: 500;
}
.intro2 {
text-align: left;
font-family: 'roboto condensed';
font-size: 2.5rem;
line-height: 1.1;
font-weight: 500;
}
.henpen1 {
text-align: center;
font-style: normal;
color: black;
margin-bottom: 0;
padding: 2rem 0 9rem 0;
font-size: 3.75rem;
line-height: 1.1;
font-weight: bold;
font-family: 'Henny Penny', cursive;
}
.henpen2 {
text-align: center;
font-style: normal;
color: white;
margin: 0;
padding: 2rem 0 1rem 0;
font-size: 3.75rem;
line-height: 1.1;
font-weight: bold;
font-family: 'Henny Penny', cursive;
}
.divider {
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 1rem;
padding: 1rem 0 4rem 0;
width: 300px;
height: 130px;
}
.contact {
margin-top: 0rem;
padding: 4rem 0rem 7rem 0rem;
background-color: #fff0ff;
font-style: normal;
text-align: left;
color: black;
font-family: 'solway', serif;
font-size: 2.25rem;
line-height: 2.38rem;
font-weight: bold;
}
.here {
color: #98ccfe;
text-align: center;
margin: 2rem 0 0 0;
font-family: 'solway', serif;
font-size: 4rem;
line-height: 4.23rem;
font-weight: 700;
}
.down {
color: black;
text-align: center;
margin: 0 0 1rem 0;
font-family: 'solway', serif;
font-size: 2.25rem;
line-height: 1.1;
font-weight: 700;
}
.thanks {
margin: 2.5rem 15% 3rem 15%;
color: #6688ab;
text-align: center;
font-style: normal;
font-family: 'solway', serif;
font-size: 2.25rem;
line-height: 2.38rem;
font-weight: bold;
}
.quest {
color: black;
text-align: center;
margin: 1rem 2rem 2.25rem 2rem;
font-family: 'solway', serif;
font-size: 3rem;
line-height: 1.05;
font-weight: bold;
}
.end {
color: black;
text-align: center;
margin: 1rem 4rem 7rem 4rem;
font-family: 'courier prime', monospace;
font-size: 2rem;
line-height: 2.13rem;
font-weight: bold;
}
td {
text-align: left;
padding-top: .5rem;
padding-right: .5rem;
padding-bottom: .6rem;
padding-left: .8rem;
}
/*▬▬▬▬▬▬ TABLE 1 ▬▬▬▬▬*/
.table1 {
width: 100%;
margin-top: 0;
border: 28px groove #98ccff;
padding: 0;
color: white;
text-align: center;
font-style: italic;
background-color: black;
font-family: 'crete round', serif;
font-size: 4rem;
line-height: 4.25rem;
font-weight: bold;
}
/*▬▬▬▬▬▬ TABLE 2 ▬▬▬▬▬ */
.table2 {
width: 100%;
margin: 0;
border-left: 28px groove #98ccff;
border-right: 28px groove #98ccff;
border-bottom: 28px groove #98ccff;
font-family: 'fira sans extra condensed', sans-serif;
font-size: 2.25rem;
line-height: 1.1;
font-weight: 500;
color: black;
}
table2 tbody tr:nth-child(odd) {
background-color: white;
}
.table2 tbody tr:nth-child(even) {
background-color: #fff0ff; /* PALE PINK */
}
/*▬▬▬▬▬▬ TABLE 3 ▬▬▬▬▬ */
.table3 {
width: 100%;
margin: 0;
border-left: 28px groove #98ccff;
border-right: 28px groove #98ccff;
border-bottom: 28px groove #98ccff;
font-family: 'fira sans extra condensed', sans-serif;
font-size: 2.25rem;
line-height: 1.1;
font-weight: 500;
color: black;
}
.posthead {
width: 150px;
text-align: center;
color: black;
border-right: 3px solid black;
font-family: 'calistoga', serif;
font-weight: 400;
font-size: 3rem;
line-height: 1.1;
}
.post {
width: 150px;
text-align: center;
color: crimson;
border-right: 3px solid black;
font-family: 'calistoga', serif;
font-weight: 400;
font-size: 3rem;
line-height: 1.1;
}
.code {
text-align: left;
width: 900px;
color: black;
font-family: 'calistoga', serif;
font-weight: 400;
font-size: 2.25rem;
line-height: 1.1;
}
.table3 tbody tr:nth-child(odd) {
background-color: white;
}
.table3 tbody tr:nth-child(even) {
background-color: #daefff; /* PALE BLUE */
}
/* ▬▬▬ RESTORES “.JOT” ▬▬▬ */
/* Restores the vertical line |
on a table in which you’ve
removed the ➜DEFAULT ROW LINES
that tables have. Note those row
lines don’t show up anywhere in
the CSS! I styled it .JOT previously. */
.table1 tbody tr td:nth-of-type(1) {
border-right: 3px solid black;
}
.table3 tr td:first-child,
.table3 tr td:first-child{
border-right: 3px solid black;
}
/* ▬▬▬▬▬ +IMPORTANT! ▬▬▬▬
AND!
ADD THIS TO PLUG THE LEAK TO
THE RIGHT EDGE OF THE TABLE
*/
.table3 tr td:first-child{border-right:none}
/* ━━━━━━━━━ COLORS ━━━━━━━*/
.blu {color: blue}
.blub {
color: blue;
font-weight: bold;
}
.crim {color: crimson}
.crimb {
color: crimson;
font-weight: bold
}
.crimi {
color: crimson;
font-style: italic
}
.green {color: #248900}
.greenb {
color: #248900;
font-weight: bold
}
/* ━━━━━━━━ LINKS ━━━━━━━━ */
.redlink a:link {
color: crimson
}
.redlink a:visited {
color: crimson
}
.blulink a:link {
color: #6688ab
}
.blulink a:visited {
color: #6688ab
}
a:active {color: blue}
a:hover {color: crimson}
a:link {color: #61b1ff}
a:visited {color: #61b1ff}
/* ━━━━━ MISCELLANEOUS ━━━━ */
.clamwh {
color: #ffffee;
/* IVORY */
font-style: italic;
font-family: roboto, sans-serif;
font-size: 2.69rem;
font-weight: 900;
}
.clamiv35 {
color: #ffffee;
font-style: italic;
font-family: roboto, sans-serif;
font-size: 3.5rem;
font-weight: 900;
}
.clambu35 {
color: #61b1ff;
font-style: italic;
font-family: roboto, sans-serif;
font-size: 3.5rem;
font-weight: 900;
}
.clamcr {
color: crimson;
font-style: italic;
font-family: roboto, sans-serif;
font-size: 2.69rem;
font-weight: 900;
}
.clamye {
color: yellow;
font-style: italic;
font-family: roboto, sans-serif;
font-size: 2.69rem;
font-weight: 900;
}
/* ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ */
/* ▬▬▬▬▬ END CSS ▬▬▬▬▬ */
</style>
</head>
<body>
<div class="aside">
<div class="leada">
Readme SVG<br>
A Collaborative Guide</div>
<div class="intro1">
The majority of these SVG tabs are multiples of the same tab and the same code (only the 1-Tab is the exception). So I’ve excerpted one block of code representative of the whole set to cut down on ((bloat)). I still indicate that you’re seeing (eg.) code from a 7-Tab Set; you just won’t see the other 6 repeated. I’m leaving in the rest of the repetition so you’ll become familiar with it recurring and eventually be able to anticipate the next block of code: <span class="crimb">That means it’s familiar and you’re LEARNING!</span></div>
<div class="intro1">Much of what you read here was guesswork to which I’ve given my best interpretation based upon multiple glossaries across the web, trying to use <b>verbs whenever possible</b>. Confusion still reins: eg., I don’t know <u>why</u>
<div class="ctr"><span class="mono"> transform="translate(</span></div>
is there other than its coincidence in being one of the last processes before the image is rendered. So I’ve rather artlessly lumped it under <span class="crimb">FINALIZE this shape</span> and left you hanging tsk. I’m not pleased; <i>with your help we can do better!</i> And why exactly do we need <span class="mono"><nav></span> when we could just point to the SVG <i>directly?</i> Oh I’ve studied their definitions (I read the entire MDN web doc for SVG; <i>all of it</i>); I know what they do; I just don’t know <span class="crimb"><u>why</u></span>.</div>
<div class="intro1">If you find errors — if I have gotten <i>anything</i> wrong — <u><b>it’s important you correct my thinking</b></u>. There is a lot here that repeats and I/we don’t want to be repeating <i>incorrect advice</i> 6 or 7 times! Please correct me <i>wherever</i> I’m</div>
<div class="intro2">wrong and try your best to use verbs wherever possible. <i><b>I’d like to be able to eliminate this Readme altogether!</b></i></div>
<div class="henpen1">semicodin</div>
<!--▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬-->
<table class="table1">
<tbody>
<tr>
<td>
<div class="leadb">
Anatomy of an SVG</div>
<div class="henpen2">by semicodin</div>
</td>
</tr>
</tbody>
</table>
<!--▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬-->
<table class="table2">
<tbody>
<tr>
<td class="posthead"></td>
<td>HEADS UP: </td></tr>
<tr>
<td class="posthead">???</td>
<td>We need better descriptors for the following elements:</td></tr>
<td></td></tr>
<tr>
<td>?</td>
<td><span class="mono"><nav></span></td></tr>
<tr>
<td></td>
<td>I know <i>what</i> this does, <span class="crimb">WHY?</span></td></tr>
<tr>
<td>?</td>
<td><span class="mono"> transform="translate(</span></td></tr>
<tr>
<td></td>
<td>Clueless.</td></tr>
<tr>
<td>?</td>
<td><span class="mono"><g id="cutetab" class="tab-unit"></span></td></tr>
<tr>
<td></td>
<td>’TF is happening here? I just guessed <i>activate tab-unit</i>.</td></tr>
<tr>
<td>?</td>
<td>CODE</td></tr>
<tr>
<td></td>
<td>DESCRIPTION</td></tr>
</tbody>
</table>
<!--▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬-->
<table class="table3">
<tbody>
<tr>
<td></td>
<td></td></tr>
<tr>
<td class="posthead" style="border-right: .3rem dashed black; vertical-align: bottom;">POST</td>
<td class="code" style="border-bottom: .3rem dashed black">ANSWER THIS:<br>To “call” an element in SVG is to <span class="green">attach it</span>(?) <span class="green">activate it</span>(?) —<span class="green">at your point</span> in the code(?) —<span class="green">wherever it is currently</span>(?)</td></tr>
<tr>
<td class="posthead" style="border-bottom: .3rem solid black">NO.</td>
<td class="code" style="border-bottom: .3rem solid black; text-align: center;">Code String <span class="goudy">&</span> Explanation</td>
</tr>
<!--▬▬▬▬ START POST ▬▬▬▬-->
<tr>
<td class="post">84</td>
<td>@nav class="svgtabs seventab"¢</td>
</tr>
<tr>
<td></td>
<td>DESCRIPTION</td></tr>
<tr>
<td></td>
<td>svg width="245" height="53" viewBox="0 0 64.823 14.023"</td></tr>
<tr>
<td></td>
<td>To the 245/53 rectangular CANVAS assign these coordinates: the <span class="crim">viewBox</span></td></tr>
<tr>
<td></td>
<td>DESCRIPTION</td></tr>
</tbody>
</table>
<div class="contact">
<div class="divider">
<img src="https://lh3.googleusercontent.com/pw/AP1GczPeo64hkCz_cdZyGBm8KuLLZNS8lwfIzZXhbdIGsL-7vIUocDY7vczP8yx_9sNex3XizKIlHiR6nYWshdsa3aAhRX8kQsKDeuLT8gZQ21qSfN2WxQ=w300-h100" alt="">
</div>
<div class="here">
<span class="blulink">
<a href="https://semicodin.infinityfreeapp.com/p_thru_z/svgreference1.html"></span>
Code Here</a>
</div>
<div class="down">
Long Press on “Download Link” and save.
</div>
<div class="thanks">
Many thanks to everyone at the Sitepoint Forums who contributed to the production of this “SVG Cheatsheet” but most particularly to <span style="color: #61b1ff">Paul O’Brien</span> whose production of every SVG tab in this thread made possible the content we could learn from in the first place! and <span style="color: #61b1ff">“snadyleiby”</span> who cracked the mystery of ((borders)) in Paul’s animated tabs. <span style="color: #61b1ff">Thank you gentlemen.</span></span>
</div>
<div class="quest">
Got Questions? You can PM me at<br>
<a href="https://sitepoint.com/community/c/html-css/25">
the Sitepoint Forums</a><span class="clambu35">!</span><br>
</div>
<div class="end">
CLICK HERE TO PROCEED<br>
<span class="blulink">
<a href="https://semicodin,.infinityfreeapp.com/intoc.html"></span>
TO THE TABLE OF CONTENTS</a>
</div>
</div><!-- CLOSING CONTACT -->
</body>
</html>
