Fixed column scroll table

Question

I have a scroll table (you can see a example in the img). In the last column I have buttons to do an action

I would like to fix this column and shake the rest.

I knew I had to use position (absolute), but if I put the keys out of it. Do you know a way to fix the last column and shake the rest?

Unfortunately it is a table that you create with react. The html code is created automatically. I can change the css, html ecc. Css for table is : <code> .table-scrollbar { overflow-y: hidden; overflow-x: scroll; margin: 5px 10px 5px 10px; border: 1px solid #dddddd; border-top-width: 0; border-bottom-width: 0; border-radius: 5px 5px 0 0; } <code> If it was possible to have a small example of how to do it — Marco_dev
– Marco_dev, Commented Jun 23, 2017 at 9:28

Carmelo Catalfamo · Accepted Answer · 2017-06-23 09:29:31Z

div {
  width: 200px;
  overflow-x: scroll;
  position: relative;
}

table {
  background: yellow;
}

.fixed {
  background: red;
  position: fixed;
  left: 210px;
}

<div>
<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
    <th>City</th>
    <th class="fixed">Year</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td> 
    <td>50</td>
    <td>London</td>
    <td class="fixed">1970</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
    <td>Madrid</td>
    <td class="fixed">1940</td>
  </tr>
</table>
</div>

<br>
<p>To test, scroll orizontally</p>

Collectives™ on Stack Overflow

Fixed column scroll table

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related