HTML table first column much larger than the second column - html

Question

So I am creating a table in html using javascript. However, anytime I create the table, the first column is much larger than the second column, while the second column is extremely compressed.
I am trying to get the first column to be compressed and the second column to be the larger one, but for some reason it doesn't want to work.
let rankings2 = [];
function generateTableHead(table, data) {
let thead = table.createTHead();
let row = thead.insertRow();
for (let key of data) {
let th = document.createElement("th");
let text = document.createTextNode(key);
th.appendChild(text);
row.appendChild(th);
th.style.textAlign='center';
}
}
function generateTable(table, data){
for (let element of data) {
let row = table.insertRow();
for (key in element) {
let cell = row.insertCell();
let text = document.createTextNode(element[key]);
cell.appendChild(text);
cell.style.textAlign='center';
}
}
}
let HotSeat = [{pos: "1", name:"Ben Shapiro's Wife"},
{pos: "2", name: "Illegal Bookies"},
{pos: "3", name: "76ers"},
{pos: "4", name: "The Post Office",},
{pos: "5", name: "New Orleans"}];
let table2 = document.getElementById("HotSeatTable");
let data2 = Object.keys(HotSeat[0]);
generateTableHead(table2,data2);
generateTable(table2,HotSeat);
window.history.forward(1);
#HotSeat {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
border-collapse: collapse;
margin: 0 auto;
width: 50%;
box-shadow: 0 4px 6px 0 hsla(0, 0%, 0%, 0.2);
}
#HotSeat td,
#HotSeat th {
border: 1px solid #ddd;
text-align: left;
width: 100%;
padding: 20px;
}
#HotSeat tr:nth-child(even) {
background-color: #f2f2f2;
}
#HotSeat tr:hover {
background-color: #ddd;
}
#HotSeat th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
width: left;
background-color: red;
color: white;
}
<div id="HotSeat">
<table id="HotSeatTable"></table>
</div>
here is what the table looks like when I dont have width: 100% in td,th

Answer 1

Remove width off the td selector. This is causing your columns to look skewed.
Then add width: 100% to get the table to fit the width of the container.
Additionally, I am not sure what you are trying to do with width: left property, so I would remove it. Same with the text-align: left in your style sheet, you set text-align: center dynamically in your JS, rendering left align useless unless you really want them left aligned.
#HotSeat {
border-collapse: collapse;
margin: 0 auto;
width: 50%;
}
#HotSeatTable {
width: 100%;
text-align: center;
}
#HotSeat td,
#HotSeat th {
border: 1px solid #ddd;
padding: 20px;
}
#HotSeat th {
padding-top: 12px;
padding-bottom: 12px;
background-color: red;
color: white;
}
<div id="HotSeat">
<table id="HotSeatTable">
<table id="HotSeatTable">
<tr>
<th>Pos</th>
<th>Name</th>
</tr>
<tr>
<td>1</td>
<td>Ben Shapiro's Wife</td>
</tr>
<tr>
<td>2</td>
<td>Illegal Bookies</td>
</tr>
<tr>
<td>3</td>
<td>76ers</td>
</tr>
<tr>
<td>4</td>
<td>The Post Office</td>
</tr>
<tr>
<td>5</td>
<td>New Orleans</td>
</tr>
</table>
</div>