How do I create an HTML table with a fixed/frozen left column and a scrollable body?

Question

I need a simple solution. I know it\'s similar to some other questions, like:

• HTML table with fixed headers and a fixed column?
• How can I lock the fir

Answer 1

If you don't want to touch your current table too much you can make a fake pinned column in front of the table.

The example shows one way of doing it without JS

table {
  border-collapse: collapse;
  border-spacing: 0;
  border: 1px solid #ffffd;
  min-width: 600px;
}

.labels {
  display:flex;
  flex-direction: column
}

.overflow {
  overflow-x: scroll;
  min width: 400px;
  flex: 1;
}

.label {
  display: flex;
  align-items: center;
  white-space:nowrap;
  padding: 10px;
  flex: 1;
  border-bottom: 1px solid #ffffd;
  border-right: 2px solid #ffffd;
}

.label:last-of-type {
  overflow-x: scroll;
  border-bottom: 0;
}

td {
  border: 1px solid #ffffd;
  padding: 10px;
}

.flex {
  display:flex;
  max-width: 600px;
  padding: 0;
  border: 5px solid #ffffd;
}

  

    Label 1
    Lorem ipsum dolor sit amet.
    Lorem ipsum dolor.
  
  

    

      

        
Lorem ipsum dolor sit amet consectetur adipisicing
        
Lorem ipsum dolor sit amet consectetur adipisicing
      
      

        
Lorem ipsum dolor sit amet consectetur adipisicing
        
Lorem ipsum dolor sit amet consectetur adipisicing
      
      

        
Lorem ipsum dolor sit amet consectetur adipisicing
        
Lorem ipsum dolor sit amet consectetur adipisicing