Table Head not taking full width of page

Question

Hello below you can see my table, however, it does not take the full width of the page, I believe it has something to do with my

 <div style={{ overflow: 'auto', height: '250px' }}>

However, I need the table headers to stay within the page and not be allowed to be scrolled down with the table body

If you don't need to support IE, you can use `position: sticky` https://www.w3schools.com/howto/howto_css_sticky_element.asp https://caniuse.com/#search=sticky — DarknessZX, Jun 04 '19 at 10:59

Sai Manoj · Accepted Answer · 2019-06-17T04:55:27.687

This solution works perfectly in chrome. This doesn't work in IE.Refer here for more solutions that work with Javascript and jQuery that works for IE

    table thead tr th {
      position: -webkit-sticky; 
      position: sticky;
      background-color: white;
      z-index: 100;
      top:-1px;
    }

table {
  border-collapse: collapse;
  width: 100%;
}

td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

table thead tr th {
  background-color: white;
  position: sticky;
  z-index: 100;
  top: -1px;
}

<table>
  <thead>
    <tr>
      <th>Company</th>
      <th>Contact</th>
      <th>Country</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alfreds Futterkiste</td>
      <td>Maria Anders</td>
      <td>Germany</td>
    </tr>
    <tr>
      <td>Centro comercial Moctezuma</td>
      <td>Francisco Chang</td>
      <td>Mexico</td>
    </tr>
    <tr>
      <td>Ernst Handel</td>
      <td>Roland Mendel</td>
      <td>Austria</td>
    </tr>
    <tr>
      <td>Island Trading</td>
      <td>Helen Bennett</td>
      <td>UK</td>
    </tr>
    <tr>
      <td>Laughing Bacchus Winecellars</td>
      <td>Yoshi Tannamuri</td>
      <td>Canada</td>
    </tr>
    <tr>
      <td>Magazzini Alimentari Riuniti</td>
      <td>Giovanni Rovelli</td>
      <td>Italy</td>
    </tr>
    <tr>
      <td>Magazzini Alimentari Riuniti</td>
      <td>Giovanni Rovelli</td>
      <td>Italy</td>
    </tr>
    <tr>
      <td>Magazzini Alimentari Riuniti</td>
      <td>Giovanni Rovelli</td>
      <td>Italy</td>
    </tr>
    <tr>
      <td>Magazzini Alimentari Riuniti</td>
      <td>Giovanni Rovelli</td>
      <td>Italy</td>
    </tr>
  </tbody>
</table>

Table Head not taking full width of page

1 Answers1