CODEWITHSUNDEEP
htmlcsshtml-table
Imd15
Imd15

Reputation: 31

HTML table first column much larger than the second column

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.

enter image description here

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 enter image description here

Upvotes: 1

Views: 2191

Answers (1)

cela
cela

Reputation: 2510

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>

Upvotes: 3

Related Questions