Как мне не сместить таблицу вниз при изменении длины текста? (Держите стол в одном положении)

Question

У меня есть простая таблица с генератором над ней, который варьируется по длине текста. Время от времени я получаю дополнительную строку, и это сдвигает мой стол вниз. Можно ли как-нибудь удержать мой стол в одной позиции?

Пожалуйста, не обращайте внимания на Javascript и смотрите только на CSS и HTML, в частности, на разделы, относящиеся к ButtonSection и Table. Спасибо

characterBuilder.style.visibility = "hidden";

var answers_Firstname = [
    'Percival', 'Percival', 'Alucard', 'Shade', 'Raine', 'Alexander', 'Omna', 'Tumelo', 
    'Siya', 'Sora', 'Yoshi', 'Anh',  'Gwendolyn', 'Flynn', 'Yagmur', 'Eser', 'Eren', 
    'Eventide', 'Ade', 'Zohar', 'Noor', 'Anesu', 'Terry', 'Morgan', 'Haldor', 'Finli', 'Lex', 
    'Vestel', 'Duris', 'Utari', 'Maor', 'Senja', 'Aki', 'Soor', 'Esmer', 'Ainsley', 'Heera', 
    'Aldus', 'Stace', 'Merryn', ];

 var answers_Lastname = [
    'Belmont', 'Haddock', 'Bludvist', 'Stompfoot', 'Stoneswallow', 'Lomaril', 'Bearbane', 'Flamehorn', 
    'Wheatfury', 'Ravenhide', 'Saintiron', 'Sagegazer', 'Astali', 'Godbrand', 'Elway', 'Uwdie', 'Abaron', 
    'Hending', 'Southwind', 'Moorridge', 'Wolfsnout', 'Baker', 'Smith', 'Mason', 'Livingston', 'Cintra', 
    'Sirakov', 'Lorz', 'Ballai', 'Byron', 'Everset', 'Dudley', 'Wan', 'Hazelton', 'Ainsley', 'Fletcher', 
    'Mannering', 'Woods', 'Ashdown', 'Dreamthief', ];

var answers_Nickname = [
    'Titch', 'Gibbs', 'Bullseye', 'Slim', 'Bobo', 'Slippy', 'Princess', 'Stout', 'Ace', 'Sticks', 'Vanilla', 
    'Dum-dum', 'Tank', 'Dino', 'Dapper', 'Black Cobra', 'Spark', 'Sizzle', 'Baby', 'Cutie Pie', 'Dynamite', 
    'Bigshot', 'Rags', 'Slayer', 'Sparkle', 'Hawk', 'Buzzkill', 'Wiz', 'Smiley', 'Jolly', 'Jade', 'Cuddles', 
    'Zen', 'Buster', 'T-Bone', 'Boomer', 'Zoomer', 'Blue', 'Marvel', ];

var answers_Age1 = [
    '19', '20', '22', '23', '24', '25', '26', '27', '30', '31', '32', '33', '36', '42', '46', '50', '59', '60', '63', '75', ];
    
var answers_Gender = [
    'male', 'female', 'bisexual', 'non-binary', 'gender-fluid', ];
    
var answers_Race = [
    'human', 'dragonborn', 'gnome', 'half-elf', 'elf', 'dwarf', 'halfling', 'tiefling', 'half-orc' ];

var answers_Realm = [
    'Coastlands', 'Highlands', 'Flatlands', 'Frostlands', 'Sunlands', 'Riverlands', 'Cliftlands', 'Woodlands', 'Shadowlands', ];
    
var answers_Location = [
    'in a hobbit hole', 'on top of a deserted tower', 'behind a secret waterfall', 'underneath a nearby tree', 'behind the local brewery',
    'deep within a concealed cave', 'in close radius to a dragons nest', 'in a humble wood shack', 'within their own mud shack',
    'somewhere in town', 'in the basement of the local tavern', 'inside the mayors residence', 'roaming town to town', 'on the side of the road',
    'in a place unknown', 'amongst a group of wolves', 'in between two orc encampments', 'underneath a dense forest', 'next to the ocean',
    'somewhere clearly lavish', 'quietly in a pig pen', 'in a tent by the river', 'as a frequent wanderer', 'in an abandoned cemetery',
    'with a group of loveable hill-bandits'];

var answers_Continent = [
    'Orsterra', 'Drava', 'Fiye', 'Melattus', 'Iwul', 'Xihul', 'Igreon', 'Neokrukus', 'Iplaes', 'Omica', 'Evis',
    'Anduin', 'Hyrule', 'Sachkhand', 'Khalistan', 'Shiokuzai', 'Wecheron', 'Besaal', 'Praeth', 'Laylan', 'Shrina',
    'Stellarum', 'Andithi Jameen', 'Dramestus' ];
        
var answers_Relationship = [
    'in a complicated relationship', 'single', 'married', 'recovering from a breakup', 'in the midst of a bad divorce', 
    'just entering their first relationship', 'falling for the love of their life', ];

var answers_Hobby = [
    'preparing for the end of the world', 'inventing a time machine', 'becoming friends with the local fauna', 'learning about exotic plants',
    'chasing down an elusive beast', 'fishing for the one that got away', 'hiking to their hearts content', 'learning of ancient religions',
    'building the perfect body', 'learning of their culture', 'trying to learn how to write poetry', 'mastering how to bake', 'experimenting with electricity',
    'investigating old ruins', 'collecting rare insects', 'breeding canines', 'breeding flowers', 'creating the perfect garden', 'creating an animal farm',
    'trying to invent new technologies', 'in the process of planning the perfect prank', 'occasionally dressing up in modern clothing',
    'collecting fascinating rocks', 'mapping the lands nearby', 'predicting the weather', 'understanding space and the cosmos itself',
    'writing a novel', 'creating sturdy armor', 'mixing old potions', 'crafting new weapons', 'experimenting with new instruments',
    'proving a complicated theory', 'spreading very convincing gossip', 'creating jewelry and art', 'painting a modern masterpiece', ];
    
var answers_EyeColour = [
    'blazing red', 'dark', 'hazel', 'baby blue', 'emerald green', 'piercing yellow', 'translucent', 'acorn brown', 'small', 
    'large', 'round', 'coal black', 'bloodshot', 'tired', 'filmy', 'unreadable', 'tense', 'welcoming', 'friendly', 'heartwarming',
     'innocent', 'intense', 'frightened', 'lustrous', 'blank' ];
    
var answers_Hair = [
    'layered', 'short-cut', 'extremely long', 'feathery', 'cascading', 'curly', 'bouncy', 'burnt', 'wavy', 'wet', 'wild',
    'patchy', 'luscious', 'heavy', 'flat', 'delicate', 'spiky', 'sweaty', 'unkempt', 'glowing', ];

var answers_Hair2 = [
    'crimson', 'ginger', 'angel', 'balding', 'silver', 'golden', 'ash-gray', 'obsidian', 'jet-black', 'almond', 'caramel',
    'colourless', 'rainbow', 'straight', 'soot-covered', ]; 
    
var answers_SkinAdjective = [
    'scaly', 'goose-bumped', 'rough', 'petal-soft', 'blemished', 'coarse', 'delicate', 'hairy', 'snooth', 'slick', 'unblemished',
    'fragrant', 'dirty', 'lackluster', 'youthful', ];

var answers_SkinColour = [
    'dusky', 'pale', 'sand-coloured', 'painted', 'ebony', 'vanilla', 'albino', 'blushing', 'creamy', 'freckled', 'bright',
    'blue-tinged', 'healthy', 'flushed', 'brown', ];
        
var answers_Height = [
    '1 metre', '1.5 metres', ' 2 metres', '3 foot 5 inches', '4 feet', '5 feet', '6 feet', '4 foot 5 inches', '5 foot 5 inches', '6 foot 5 inches', ];
    
var answers_Build = [
    'a medium', 'an extremely large', 'a small', 'a puny', 'an average', 'an above-average', ' a large', 'an athletic', 'a slender', 'an irregular', ];
        
var answers_Face1 = [
    'a calm', 'an anxious', 'a grim', 'an enthusiastic', 'an angelic', 'a pained', 'a peculiar', 'an odd', 'a rested', 'a stern', 'a suspicious', 
    'an ordinary', 'an intelligent', 'a cool', 'a charming', 'a childlike', 'a deceptive', 'a demonic', 'a fierce', 'an alert',  ];
            
var answers_Face2 = [
    'elegant', 'thin', 'hairless', 'hairy', 'acned', 'dimpled', 'chinless', 'scarred', 'stretched', 'strong', 'unwashed',
    'spotted', 'unreadable', 'expressive', 'mud-splattered', 'unremarkable', 'glamourous', 'edgy', 'sharp', 'oval', ];
            
var answers_Description = [
    'a long, flowing beard', 'a short and stubby beard', 'a goatee', 'a small scar on their left cheek', 'their hood taken off', 
    'three nose piercings', 'a smell of cedar wood permeating off them', 'sweat dripping off them', 'extremely long nails',
    'a shawl wrapped around their neck', 'two extra fingers on each hand', 'a smell of lavender permeating off them',
    'their right arm missing', 'their left leg missing', 'a small lisp', 'a deep voice', 'a very high-pitched voice', 
    'a makeshift cape around themselves', 'a large chestplate attached to their person', 'light, flowing garbs', ];

var answers_Quirk1 = [
    'are an alcoholic', 'are blind in one eye', 'are a compulsive gambler', 'a hopeless romantic', 'are very patient', 'are a perfectionist',
    'are very courageous, to a fault', 'are very detached from their emotions', 'are very emotional', 'are materialistic', 'cant keep a secret',
    'cant play fair', 'dont care about risks', 'complicate situations easily', 'dont like crowds', 'talk very quietly', 'talk very loudly', 
    'talk very slow', 'talk very fast', 'always judge people', 'are very good at keeping secrets', 'dont care about anything', 
    'are slightly insane', 'are easily excitable', 'are always bored', 'are slightly lazy', 'are noy direct at all', 'are very intense', 
    'are very optimistic', ];
        
var answers_Quirk2 = [
    'a short temper', 'a habit to think aloud', 'a solution to everything', 'a pet dog', 'a pet cat', 'an orc cousin', 'a friendship with the trees',
    'great musical talent', 'an unusual gift for finding expensive clothing', 'a beautiful singing voice', 'a beautiful outlook on life',
    'a great sense of humour', 'lost many friends', 'gained a knack for lying', 'gained of skill of bartering', 'gained a skill for convincing',
    'quite a bit of wisdom', 'a story for everything', 'a very large inheritance', 'a habit of daydreaming', 'a considerable appetite', 
    'good experience in hunting', 'no concept of social cues', 'persuasive dance moves', 'good fighting skills', ];
        
var answers_Dream = [
    'climb the tallest mountain', 'get married to royalty', 'slay a dragon', 'become famous', 'run a tavern', 'start a world religion',
    'bake the sweetest pastry', 'build the fastest boat', 'tame the strongest beast', 'brew the worlds most pungent potion',
    'win a competition', 'appease a god', 'avenge their family members', 'create a utopia', 'cause mayhem', 'be a hero', 'see the world',
    'establish their own country', 'thwart destiny', 'solve a mystery', 'answer a call to adventure', 'become the strongest',
    'become the wisest', 'be a master in their field', 'explore the unexplored', 'live forever', 'find a cure to a world plague',
    'rid the world of evil', 'forget their past', 'spread joy', ];
        
var answers_Skill = [
    'bake an explosive cheesecake', 'act extremely charming', 'talk to animals', 'set fires from afar', 'call upon the gods',
    'speak the language of dragons', 'enlist the help of the local fish population', 'create makeshift explosives',
    'communicate with the devil', 'run extremely quickly', 'throw things very far', 'engineer a small sculpture',
    'speak five languages simultaneously', 'have better writing skills', 'become an expert thief', 'shoot two bows at the same time',
    'hide in plain sight', 'act like an evil wizard', 'act hopelessly dumb', 'smell really bad', ];
    
    document.getElementById('answerButton').onclick = function () {
    characterBuilder.style.visibility = 'visible';
    var answer_Firstname = answers_Firstname[Math.floor(Math.random() * answers_Firstname.length)];
    var answer_Lastname = answers_Lastname[Math.floor(Math.random() * answers_Lastname.length)];
    var answer_Nickname = answers_Nickname[Math.floor(Math.random() * answers_Nickname.length)];
    var answer_Age1 = answers_Age1[Math.floor(Math.random() * answers_Age1.length)];
    var answer_Gender = answers_Gender[Math.floor(Math.random() * answers_Gender.length)];
    var answer_Race = answers_Race[Math.floor(Math.random() * answers_Race.length)];
    var answer_Realm = answers_Realm[Math.floor(Math.random() * answers_Realm.length)];
    var answer_Location = answers_Location[Math.floor(Math.random() * answers_Location.length)];
    var answer_Continent = answers_Continent[Math.floor(Math.random() * answers_Continent.length)];
    var answer_Relationship = answers_Relationship[Math.floor(Math.random() * answers_Relationship.length)];
    var answer_Hobby = answers_Hobby[Math.floor(Math.random() * answers_Hobby.length)];
    var answer_EyeColour = answers_EyeColour[Math.floor(Math.random() * answers_EyeColour.length)];
    var answer_Hair = answers_Hair[Math.floor(Math.random() * answers_Hair.length)];
    var answer_SkinAdjective = answers_SkinAdjective[Math.floor(Math.random() * answers_SkinAdjective.length)];
    var answer_SkinColour = answers_SkinColour[Math.floor(Math.random() * answers_SkinColour.length)];
    var answer_Height = answers_Height[Math.floor(Math.random() * answers_Height.length)];
    var answer_Build = answers_Build[Math.floor(Math.random() * answers_Build.length)];
    var answer_Face1 = answers_Face1[Math.floor(Math.random() * answers_Face1.length)];
    var answer_Face2 = answers_Face2[Math.floor(Math.random() * answers_Face2.length)];
    var answer_Description = answers_Description[Math.floor(Math.random() * answers_Description.length)];
    var answer_Quirk1 = answers_Quirk1[Math.floor(Math.random() * answers_Quirk1.length)];
    var answer_Quirk2 = answers_Quirk2[Math.floor(Math.random() * answers_Quirk2.length)];
    var answer_Dream = answers_Dream[Math.floor(Math.random() * answers_Dream.length)];
    var answer_Skill = answers_Skill[Math.floor(Math.random() * answers_Skill.length)];
    
    document.getElementById('answerContainer_Firstname').innerHTML = answer_Firstname;
    document.getElementById('answerContainer_Firstname1').innerHTML = answer_Firstname;
    document.getElementById('answerContainer_Firstname2').innerHTML = answer_Firstname;
    document.getElementById('answerContainer_Firstname3').innerHTML = answer_Firstname;
    document.getElementById('answerContainer_Firstname4').innerHTML = answer_Firstname;
    document.getElementById('answerContainer_Firstname5').innerHTML = answer_Firstname;
    document.getElementById('answerContainer_Firstname6').innerHTML = answer_Firstname;
    document.getElementById('answerContainer_Lastname').innerHTML = answer_Lastname;
    document.getElementById('answerContainer_Nickname').innerHTML = answer_Nickname;
    document.getElementById('answerContainer_Age1').innerHTML = answer_Age1;
    document.getElementById('answerContainer_Gender').innerHTML = answer_Gender;
    document.getElementById('answerContainer_Race').innerHTML = answer_Race;
    document.getElementById('answerContainer_Realm').innerHTML = answer_Realm;
    document.getElementById('answerContainer_Location').innerHTML = answer_Location;
    document.getElementById('answerContainer_Continent').innerHTML = answer_Continent;
    document.getElementById('answerContainer_Relationship').innerHTML = answer_Relationship;
    document.getElementById('answerContainer_Hobby').innerHTML = answer_Hobby;
    document.getElementById('answerContainer_EyeColour').innerHTML = answer_EyeColour;
    document.getElementById('answerContainer_Hair').innerHTML = answer_Hair;
    document.getElementById('answerContainer_SkinAdjective').innerHTML = answer_SkinAdjective;
    document.getElementById('answerContainer_SkinColour').innerHTML = answer_SkinColour;
    document.getElementById('answerContainer_Height').innerHTML = answer_Height;
    document.getElementById('answerContainer_Build').innerHTML = answer_Build;
    document.getElementById('answerContainer_Face1').innerHTML = answer_Face1;
    document.getElementById('answerContainer_Face2').innerHTML = answer_Face2;
    document.getElementById('answerContainer_Description').innerHTML = answer_Description;
    document.getElementById('answerContainer_Quirk1').innerHTML = answer_Quirk1;
    document.getElementById('answerContainer_Quirk2').innerHTML = answer_Quirk2;
    document.getElementById('answerContainer_Dream').innerHTML = answer_Dream;
    document.getElementById('answerContainer_Skill').innerHTML = answer_Skill;
    };

/* CSS For Body */
body {
  font-family: Arial; /* Font style */
  padding: 10px; /* Padding amount */
  background: #9c620a; /* Body Colour */
}

/* CSS for the Header */
.Header {
  text-align: center; /* Aligns text to the middle */
  font-size: 30px; /* Font size of 30 px */
  width: 1867px; /* Width of container is 1867 px. Heh, that's the year of Confederation */
  height: 600px; /* Height of container is 600 px */
  line-height: 45%; /* Height between lines is reduced to 45% */
  background-image: url("https://i.pinimg.com/originals/8d/d3/cc/8dd3cc97d6ea2da3d5a9d217c1f782f6.jpg"); /* Image URL */
  color: rgb(182, 83, 44); /* Text Colour for the Header */
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; /* Black Text Shadow Code */
}

/* CSS for the Menu */
#Menu {
 font-size: 25px; /* Font size of 25 px */
}

/* CSS for the Menu background */
#Menu ul {
  list-style-type: none; /* No Bullets */
  overflow: hidden; /* No Scroll Wheel */
  background-color: rgb(77, 39, 21); /* Background colour of the Menu */
  margin-bottom: 0px; /* Margin from the top div is 0 */
  margin-top: 0px; /* Margin from the top div is 0 */
  padding: 0; /* No padding on the left and right of the menu */
  display: flex; /* Add flexbox to list */
}

/* CSS for Menu Edges*/
#Menu li {
  border-right: 1px solid rgb(104, 99, 99); /* Left border line of 1 px separating blocks. */
  border-left: 1px solid rgb(104, 99, 99); /* Right border line of 1 px separating blocks. */
  flex: 1  /* With flexbox we don't need float anymore */

}

/* CSS for Menu Tabs */
#Menu li a {
  display: block; /* Turns it into a block display */
  color: rgb(187, 180, 180); /* Background colour of Text */
  text-align: center; /* Aligns text to the middle of the block */ 
  padding: 16px 177px; /* Padding of 16px and 177 px between blocks */
  text-decoration: none; /* Makes sure there are no underlines */
}

/* CSS for Inactive Menu Tab */
#Menu li a:hover:not(.active) {
  background-color: rgb(119, 95, 50); /* Background colour of Inactive Menu Tab */
}

/* CSS for Active Menu Tab */
#Menu .active {
  background-color: rgb(105, 75, 19); /* Background colour of Active Menu Tab */
}

/* CSS for the main section with the button */
.ButtonSection {
  background-color: rgb(233, 193, 141); /* Background colour of Button Section */
  text-align: center; /* Aligns text to the middle */
  padding: 15px; /* Padding amount of 15 px */ 
  font-size: 20px; /* Font size of 20 px */
  height: 800px; /* Height of container */
  overflow-y:auto; /* Makes sure container size doesn't shift from 700px */
}

/* CSS for the Footer */
.footer {
  text-align: center; /* Aligns text to the middle */
  background: rgb(189, 154, 59); /* Footer Background Colour */
  padding: 10px; /* Padding amount of 10 px */
  width: 1847px; /* Width of 1847 px */
  height: 60px; /* Height of 60 px */
}

table {
    table-layout: fixed; /* Makes the line between columns go down the middle */
    margin-left: 775px; /* moves your table 450 pixels right */
}

<html>
<head>
	<title>NPC Generator - Main Page</title>
	<link rel="stylesheet" type="text/css" href= "CSS_Main.css">
<style>
	table, th, td {
	border: 1px solid black;
	border-collapse: collapse;
	}
	th, td {
	padding: 5px;
	text-align: center;
	}
</style>
</head>

<body>
<div class="Header">
	<br> <h1>Lev's NPC Generator </h1> <h2>Unique Characters for your Unique Campaign.</h2>
</div>

<div id="Menu">
     <ul>
		<li><a class="active" href="Main Page.html">Home</li></a></li>
		<li><a href="About.html">About</li></a></li>
		<li><a href="Contacts.html">Contacts</li></a></li>
		<li><a href="Testimonials.html">Testimonials</li></a></li>
	</ul>
</div>

<div class="ButtonSection">
	<br> <h2> A new character awaits, randomized below. Will they be friend or foe, enemy or ally? Perhaps they will lead our Adventurers into great peril, or bring them newfound 
	treasures beyond their wildest dreams? </h2>
	
	<button id='answerButton' style = "font-size : 30px; height: 100px; background-color: rgb(189, 154, 59); width: 200px;"> Randomize Character!</button>

	<br> <br> <div id="characterBuilder">
		<br> <span id="answerContainer_Firstname">Firstname</span> <span id="answerContainer_Lastname">Lastname</span> is a <span id="answerContainer_Age1">Age1</span> 
		year old <span id="answerContainer_Gender">Gender</span> <span id="answerContainer_Race">Race</span> who occasionally goes by the name <span id="answerContainer_Nickname">Nickname</span>.
		<span id="answerContainer_Firstname1">Firstname1</span> is currently <span id="answerContainer_Relationship">Relationship</span>. They originally come from the 
		<span id="answerContainer_Realm">Realm</span> of <span id="answerContainer_Continent">Continent</span> but now live <span id="answerContainer_Location">Location</span> while 
		<span id="answerContainer_Hobby">Hobby</span>. They have <span id="answerContainer_EyeColour">EyeColour</span> eyes, <span id="answerContainer_Hair">Hair</span>, <span id="answerContainer_Hair2">Hair2</span> 
		hair and <span id="answerContainer_SkinAdjective">SkinAdjective</span>, <span id="answerContainer_SkinColour">SkinColour</span> skin. <span id="answerContainer_Firstname2">Firstname2</span> stands
		<span id="answerContainer_Height">Height</span> tall and has <span id="answerContainer_Build">Build</span> build. In addition, they have <span id="answerContainer_Face1">Face1</span>, 
		<span id="answerContainer_Face2">Face2</span> face with <span id="answerContainer_Description">Description</span>. <br> <br>
	   
		<span id="answerContainer_WeaponTime">WeaponTime</span>, <span id="answerContainer_Firstname3">Firstname3</span> carries their trusty <span id="answerContainer_Weapon">Weapon</span> 
		<span id="answerContainer_WeaponName">WeaponName</span> with them. It was given to them by their <span id="answerContainer_FunnyTrait">FunnyTrait</span> 
		<span id="answerContainer_FamilyMember">FamilyMember</span> <span id="answerContainer_Year">Year</span> years ago. They had a very <span id="answerContainer_Background">Background</span> childhood 
		and growing up they always wanted to <span id="answerContainer_Dream">Dream</span>. At the age of <span id="answerContainer_Age2">Age2</span>, 
		they had to learn to <span id="answerContainer_Skill">Skill</span> when a horde of <span id="answerContainer_MonsterAdjective">MonsterAdjective</span> 
		<span id="answerContainer_Monster">Monster</span> attacked their <span id="answerContainer_HomeAdjective">HomeAdjective</span> home. <br> <br>
	   
		<span id="answerContainer_Firstname4">Firstname4</span> <span id="answerContainer_GodAdjective">GodAdjective</span> worships <span id="answerContainer_God">God</span>, 
		Goddess of <span id="answerContainer_GodThing1">GodThing1</span> and <span id="answerContainer_GodThing2">GodThing2</span> (<span id="answerContainer_Alignment1">Alignment1</span> 
		<span id="answerContainer_Alignment2">Alignment2</span>). They’re very <span id="answerContainer_Trait1">Trait1</span>, <span id="answerContainer_Trait2">Trait2</span>, and 
		empathetic towards <span id="answerContainer_Thing">Thing</span>. They can’t stand <span id="answerContainer_HateThing">HateThing</span> and are hopelessly 
		scared of <span id="answerContainer_ScareThing">ScareThing</span>. <span id="answerContainer_Firstname5">Firstname5</span> loves <span id="answerContainer_LoveThing">LoveThing</span> and 
		<span id="answerContainer_Personality">Personality</span>. They <span id="answerContainer_Quirk1">Quirk1</span> and have <span id="answerContainer_Quirk2">Quirk2</span>. One secret 
		<span id="answerContainer_Firstname6">Firstname6</span> will never tell anyone is that <span id="answerContainer_PlotHook">Plothook</span>. <br> <br>

			
	<br> <br> <table style="width:15%">
		<tr>
		    <th>Ability Scores</th>
			<th>Score</th> 
		</tr>
		<tr>
			<td>Strength</td>
			<td><span id="answerContainer_Strength">Strength</span></td>
				
        </tr>
		<tr>
			<td>Dexterity</td>
			<td><span id="answerContainer_Dexterity">Dexterity</span></td>
		</tr>
		<tr>
			<td>Constitution</td>
			<td><span id="answerContainer_Constitution">Constitution</span></td>
		</tr>
		<tr>
			<td>Intelligence</td>
			<td><span id="answerContainer_Intelligence">Intelligence</span></td>
		</tr>
		<tr>
			<td>Wisdom</td>
			<td><span id="answerContainer_Wisdom">Wisdom</span></td>
		</tr>
		<tr>
			<td>Charisma</td>
			<td><span id="answerContainer_Charisma">Charisma</span></td>
		</tr>
	</table>
			
	</div>
</div>
		
<div class="footer">
	<h3>Thank you for visiting Lev's NPC Generator. I hope you enjoy all the potential characters that my custom-build generator will create for you! © 2020 Amrit Singh. All rights reserved. </h2> 
</div>

 <script src="NPC_Gen.js"></script>
</body>
</html>

Answer 1

Вы можете попробовать обернуть текст, который варьируется по длине, в элемент div и зафиксировать его высоту, чтобы самый длинный текст не перемещал таблицу.

В вашем html:

<div class="text-container">
    <span> your generated text is in here </span>
</div>

И в вашем css:

.text-container{
    height: 250px;
}

Редактировать: я добавил пример ниже, возможно, это поможет.

const button = document.getElementById('generate');
const textElement = document.getElementById('text');


const text1 = " Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia dicta nisi illo, id totam cumque aliquam voluptatum provident nihil molestias animi, est nostrum aut perspiciatis, error et fugit voluptatem commodi."


function generate() {
  if (textElement.innerText === "") {
    textElement.innerText = text1;
  } else {
    textElement.innerText = "";
  }
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

table {
  border-collapse: collapse;
}

table,
th,
td {
  border: 1px solid black;
}

th,
td {
  padding: 5px;
}

#generate {
  margin: 10px;
}

.text-container {
  height: 150px;
  background-color: #eeeeee;
}

<body>
  <button id="generate" onClick="generate()">generate</button>
  <div class="text-container">
    <span>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia dicta nisi illo, id totam cumque aliquam voluptatum provident nihil molestias animi, est nostrum aut perspiciatis, error et fugit voluptatem commodi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit expedita, eum quisquam culpa consectetur laborum, vitae ex cum. Voluptatibus, numquam. Odit, debitis ad. Nam veritatis dicta adipisci non. Culpa, quidem!
    </span>

    <span id="text"></span>

  </div>

  <table>
    <tr>
      <th>Score</th>
      <th>Score</th>
    </tr>
    <tr>
      <td>Value</td>
      <td>Value</td>
    </tr>
    <tr>
      <td>Value</td>
      <td>Value</td>
    </tr>
    <tr>
      <td>Value</td>
      <td>Value</td>
    </tr>
    <tr>
      <td>Value</td>
      <td>Value</td>
    </tr>
    <tr>
      <td>Value</td>
      <td>Value</td>
    </tr>
    <tr>
      <td>Value</td>
      <td>Value</td>
    </tr>

  </table>
</body>