Table messing up formatting of text - html

Question

I am using Anki (you don't have to be familiar with this) which is a flashcard app. When designing the cards, I cannot figure out what is going wrong.
The front of the card:
<div class="front">
{{#Title}}<div class="title">{{Title}}</div>{{/Title}}
<div class="subtitle">Details</div>
<table id="clozed">
<tr>
<td class="heading">Origin</td>
<td>{{cloze:Text1}}</td>
</tr>
<tr>
<td class="heading">Insertion</td>
<td>{{cloze:Text2}}</td>
</tr>
<tr>
<td class="heading">Innervation</td>
<td>{{cloze:Text3}}</td>
</tr>
<tr>
<td class="heading">Action</td>
<td>{{cloze:Text4}}</td>
</tr>
</table>
</div>
<script>
// Scroll to cloze
function scrollToCloze () {
const cloze1 = document.getElementsByClassName("cloze")[0];
const rect = cloze1.getBoundingClientRect();
const absTop = rect.top + window.pageYOffset;
const absBot = rect.bottom + window.pageYOffset;
if (absBot >= window.innerHeight) {
const height = rect.top - rect.bottom
const middle = absTop - (window.innerHeight/2) - (height/2);
window.scrollTo(0, middle);
};
}
if ( document.readyState === 'complete' ) {
setTimeout(scrollToCloze, 1);
} else {
document.addEventListener('DOMContentLoaded', function() {
setTimeout(scrollToCloze, 1);
}, false);
}
</script>
The back of the card:
<div class="back">
{{#Title}}<div class="title">{{Title}}</div>{{/Title}}
<div class="subtitle">Details</div>
<table id="clozed">
<tr>
<td class="heading">Origin</td>
<td>{{cloze:Text1}}</td>
</tr>
<tr>
<td class="heading">Insertion</td>
<td>{{cloze:Text2}}</td>
</tr>
<tr>
<td class="heading">Innervation</td>
<td>{{cloze:Text3}}</td>
</tr>
<tr>
<td class="heading">Action</td>
<td>{{cloze:Text4}}</td>
</tr>
</table>
</div>
<script>
// Remove cloze syntax from revealed hint
var hint = document.getElementById("original");
if (hint) {
var html = hint.innerHTML.replace(/\[\[oc(\d+)::(.*?)(::(.*?))?\]\]/mg,
"<span class='cloze'>$2</span>");
hint.innerHTML = html
};
// Scroll to cloze
function scrollToCloze () {
const cloze1 = document.getElementsByClassName("cloze")[0];
const rect = cloze1.getBoundingClientRect();
const absTop = rect.top + window.pageYOffset;
const absBot = rect.bottom + window.pageYOffset;
if (absBot >= window.innerHeight) {
const height = rect.top - rect.bottom
const middle = absTop - (window.innerHeight/2) - (height/2);
window.scrollTo(0, middle);
};
}
if ( document.readyState === 'complete' ) {
setTimeout(scrollToCloze, 1);
} else {
document.addEventListener('DOMContentLoaded', function() {
setTimeout(scrollToCloze, 1);
}, false);
}
// Reveal full list
var olToggle = function() {
var orig = document.getElementById('original');
var clozed = document.getElementById('clozed');
var origHtml = orig.innerHTML
orig.innerHTML = clozed.innerHTML
clozed.innerHTML = origHtml
}
</script>
The css styling of the card:
html {
/* scrollbar always visible in order to prevent shift when revealing answer*/
overflow-y: scroll;
}
.card {
border: 1px solid #404040;
padding: 8px;
font-weight: normal;
font-size: 16px;
text-align: left;
color: black;
background-color: white;
}
/* general layout */
.text {
/* center left-aligned text on card */
column-count: 2;
display: inline-block;
align: center;
text-align: left;
margin: auto;
max-width: 40em;
}
.hidden {
/* guarantees a consistent width across front and back */
font-weight: bold;
display: block;
line-height:0;
height: 0;
overflow: hidden;
visibility: hidden;
}
.title {
background-color: #edcac5;
color: #000000;
font-weight: bold;
font-size: 20px;
margin-bottom: 10px;
text-align: center;
}
.subtitle {
background-color: #3b3b3d;
color: #FFFFFF;
font-weight: bold;
font-size: 16px;
padding: 3px;
margin-bottom: 5px;
text-align: center;
}
.heading {
color: #6395ff;
font-weight: bold;
text-align: left;
width: 30%;
}
table {
table-layout: fixed;
width: 100%;
}
td {
word-wrap: break-word;
}
/* clozes */
.cloze {
/* regular cloze deletion */
font-weight: bold;
color: #FFFFFF;
}
.card21 #btn-reveal{
/* no need to display reveal btn on last card */
display:none;
}
/* additional fields */
.extra{
margin-top: 0.5em;
margin: auto;
max-width: 40em;
}
.extra-entry{
margin-top: 0.8em;
font-size: 0.9em;
text-align:left;
}
.extra-descr{
margin-bottom: 0.2em;
font-weight: bold;
font-size: 1em;
}
#btn-reveal {
font-size: 0.5em;
display:none;
}
.mobile #btn-reveal {
font-size: 0.8em;
display:none;
}
This is how it is supposed to look:
But this is how it ends up looking:
I think the table has something to do with this, I greatly appreciate any help/feedback.

Answer 1

I went ahead and threw a section id and called it wrapper and give it a with. This way will minimize any format issues.
// Scroll to cloze
function scrollToCloze () {
const cloze1 = document.getElementsByClassName("cloze")[0];
const rect = cloze1.getBoundingClientRect();
const absTop = rect.top + window.pageYOffset;
const absBot = rect.bottom + window.pageYOffset;
if (absBot >= window.innerHeight) {
const height = rect.top - rect.bottom
const middle = absTop - (window.innerHeight/2) - (height/2);
window.scrollTo(0, middle);
};
}
if ( document.readyState === 'complete' ) {
setTimeout(scrollToCloze, 1);
} else {
document.addEventListener('DOMContentLoaded', function() {
setTimeout(scrollToCloze, 1);
}, false);
}
// back of card
// Remove cloze syntax from revealed hint
var hint = document.getElementById("original");
if (hint) {
var html = hint.innerHTML.replace(/\[\[oc(\d+)::(.*?)(::(.*?))?\]\]/mg,
"<span class='cloze'>$2</span>");
hint.innerHTML = html
};
// Scroll to cloze
function scrollToCloze () {
const cloze1 = document.getElementsByClassName("cloze")[0];
const rect = cloze1.getBoundingClientRect();
const absTop = rect.top + window.pageYOffset;
const absBot = rect.bottom + window.pageYOffset;
if (absBot >= window.innerHeight) {
const height = rect.top - rect.bottom
const middle = absTop - (window.innerHeight/2) - (height/2);
window.scrollTo(0, middle);
};
}
if ( document.readyState === 'complete' ) {
setTimeout(scrollToCloze, 1);
} else {
document.addEventListener('DOMContentLoaded', function() {
setTimeout(scrollToCloze, 1);
}, false);
}
// Reveal full list
var olToggle = function() {
var orig = document.getElementById('original');
var clozed = document.getElementById('clozed');
var origHtml = orig.innerHTML
orig.innerHTML = clozed.innerHTML
clozed.innerHTML = origHtml
}
html {
/* scrollbar always visible in order to prevent shift when revealing answer*/
overflow-y: scroll;
}
.card {
border: 1px solid #404040;
padding: 8px;
font-weight: normal;
font-size: 16px;
text-align: left;
color: black;
background-color: white;
}
/* general layout */
.text {
/* center left-aligned text on card */
column-count: 2;
display: inline-block;
align-items: center;
text-align: left;
margin: auto;
max-width: 40em;
}
.hidden {
/* guarantees a consistent width across front and back */
font-weight: bold;
display: block;
line-height:0;
height: 0;
overflow: hidden;
visibility: hidden;
}
.title {
background-color: #edcac5;
color: #000000;
font-weight: bold;
font-size: 20px;
margin-bottom: 10px;
text-align: center;
}
.subtitle {
background-color: #3b3b3d;
color: #FFFFFF;
font-weight: bold;
font-size: 16px;
padding: 3px;
margin-bottom: 5px;
text-align: center;
}
.heading {
color: #6395ff;
font-weight: bold;
text-align: left;
width: 30%;
}
table {
table-layout: fixed;
width: 100%;
}
td {
word-wrap: break-word;
}
/* clozes */
.cloze {
/* regular cloze deletion */
font-weight: bold;
color: #FFFFFF;
}
.card21 #btn-reveal{
/* no need to display reveal btn on last card */
display:none;
}
/* additional fields */
.extra{
margin-top: 0.5em;
margin: auto;
max-width: 40em;
}
.extra-entry{
margin-top: 0.8em;
font-size: 0.9em;
text-align:left;
}
.extra-descr{
margin-bottom: 0.2em;
font-weight: bold;
font-size: 1em;
}
#btn-reveal {
font-size: 0.5em;
display:none;
}
.mobile #btn-reveal {
font-size: 0.8em;
display:none;
}
/* new css */
#wrapper {
width: 309px;
margin: auto;
}
<section id="wrapper">
<div class="front">
<div class="title">Title</div>
<div class="subtitle">Details</div>
<table id="clozed">
<tr>
<td class="heading">Origin</td>
<td>cloze:Text1</td>
</tr>
<tr>
<td class="heading">Insertion</td>
<td>cloze:Text2</td>
</tr>
<tr>
<td class="heading">Innervation</td>
<td>cloze:Text3</td>
</tr>
<tr>
<td class="heading">Action</td>
<td>cloze:Text4</td>
</tr>
</table>
</div>
<!-- back of card -->
<div class="back">
<div class="title">Title</div>
<div class="subtitle">Details</div>
<table id="clozed">
<tr>
<td class="heading">Origin</td>
<td>cloze:Text1</td>
</tr>
<tr>
<td class="heading">Insertion</td>
<td>cloze:Text2</td>
</tr>
<tr>
<td class="heading">Innervation</td>
<td>cloze:Text3</td>
</tr>
<tr>
<td class="heading">Action</td>
<td>cloze:Text4</td>
</tr>
</table>
</div>
</section>