CODEWITHSUNDEEP
htmlcss
Runner Bean
Runner Bean

Reputation: 5195

HTML CSS identical tables don't line up

I have two tables that I want to line up, as simple demo I have made the following reproducible code which illustrates my problem

#index_table,
#index_table_header {
  text-align: left;
  margin: 20px;
  margin: 0 auto;
}

#index_table,
#index_table_header {
  width: 800px;
}

#index_table_header th {
  padding: 10px 8px;
  width: 100px;
  border: 1px solid black;
}

#index_table td {
  padding: 10px 8px;
  width: 100px;
  border: 1px solid black;
}

#index_table td:nth-child(1),
#index_table_header th:nth-child(1) {
  width: 60px;
}

#index_table td:nth-child(3),
#index_table_header th:nth-child(3) {
  width: 70px;
}

#index_table td:nth-child(5),
#index_table_header th:nth-child(5) {
  width: 200px;
}

#index_table td:nth-child(2),
#index_table_header th:nth-child(2) {
  width: 250px;
}
<table id="index_table_header">
  <thead>
    <tr>
      <th scope="col">ID</th>
      <th scope="col">Item</th>
      <th scope="col">Amount</th>
      <th scope="col">Added</th>
      <th scope="col">Nutritional Value ID</th>
      <th scope="col">Actions</th>
    </tr>
  </thead>
</table>
<table id="index_table">
  <tbody>
    <tr>
      <td>395</td>
      <td>chicken liver</td>
      <td>0.37</td>
      <td>2019-10-14</td>
      <td>67</td>
      <td>
        <a href="/delete/395">Delete</a>
        <br>
        <a href="/update/395">Update</a>
      </td>
    </tr>
  </tbody>
</table>

The first table has a slightly smaller in width first th than the seconds tables td, then looking along the cells, they are all out of sync.

Upvotes: 1

Views: 83

Answers (1)

Cody MacPixelface
Cody MacPixelface

Reputation: 1386

Add table-layout: fixed; to your table rules. This will force the table to ignore the cell contents and instead wrap text according to the specified widths.

table {
  table-layout: fixed;
}

#index_table,
#index_table_header {
  text-align: left;
  margin: 20px;
  margin: 0 auto;
}

#index_table,
#index_table_header {
  width: 800px;
}

#index_table_header th {
  padding: 10px 8px;
  width: 100px;
  border: 1px solid black;
}

#index_table td {
  padding: 10px 8px;
  width: 100px;
  border: 1px solid black;
}

#index_table td:nth-child(1),
#index_table_header th:nth-child(1) {
  width: 60px;
}

#index_table td:nth-child(3),
#index_table_header th:nth-child(3) {
  width: 70px;
}

#index_table td:nth-child(5),
#index_table_header th:nth-child(5) {
  width: 200px;
}

#index_table td:nth-child(2),
#index_table_header th:nth-child(2) {
  width: 250px;
}
<table id="index_table_header">
  <thead>
    <tr>
      <th scope="col">ID</th>
      <th scope="col">Item</th>
      <th scope="col">Amount</th>
      <th scope="col">Added</th>
      <th scope="col">Nutritional Value ID</th>
      <th scope="col">Actions</th>
    </tr>
  </thead>
</table>
<table id="index_table">
  <tbody>
    <tr>
      <td>395</td>
      <td>chicken liver</td>
      <td>0.37</td>
      <td>2019-10-14</td>
      <td>67</td>
      <td>
        <a href="/delete/395">Delete</a>
        <br>
        <a href="/update/395">Update</a>
      </td>
    </tr>
  </tbody>
</table>

Upvotes: 3

Related Questions