Skip to content Skip to sidebar Skip to footer
Home / Css / Html

Html Table With Fixed First Column

Post a Comment
I'm searching for 3 days to find a solution in all forums but unfortunately, nothing found. I can't find how to make the first column (not the first row) in an HTML table fixed whe

Solution 1:

Try out position: fixed and use padding/margin to position the second td :)

/*just for better display*/td{
  color: red;
}

.first{
  position: fixed;
  color: green;
}

.second{
  padding-left: 25px;
  color: blue;
}
<html><table><tr><tdclass="first">abc</td><tdclass="second">def</td><td>ghi</td></tr><tr><tdclass="first">abc</td><tdclass="second">def</td><td>ghi</td></tr><tr><tdclass="first">abc</td><tdclass="second">def</td><td>ghi</td></tr></table></html>

Solution 2: 

/* above this is decorative, not part of the test */.fixed-table-container {
      width: 100%;
      height: 200px;
      border: 1px solid black;
      margin: 10px auto;
      background-color: white;
      /* above is decorative or flexible */position: relative; /* could be absolute or relative */padding-top: 30px; /* height of header */
    }

    .fixed-table-container-inner {
      overflow-x: hidden;
      overflow-y: auto;
      height: 100%;
    }
     
    .header-background {
      background-color: #D5ECFF;
      height: 30px; /* height of header */position: absolute;
      top: 0;
      right: 0;
      left: 0;
    }
    
    table {
      background-color: white;
      width: 100%;
      overflow-x: hidden;
      overflow-y: auto;
    }

    .th-inner {
      position: absolute;
      top: 0;
      line-height: 30px; /* height of header */text-align: left;
      border-left: 1px solid black;
      padding-left: 5px;
      margin-left: -5px;
    }
    .first.th-inner {
        border-left: none;
        padding-left: 6px;
      }
        
<divclass="fixed-table-container"><divclass="header-background"></div><divclass="fixed-table-container-inner"><tablecellspacing="0"><thead><tr><thclass="first"><divclass="th-inner">First</div></th><thclass="second"><divclass="th-inner">Second</div></th><thclass="third"><divclass="th-inner">Third</div></th><thclass="third"><divclass="th-inner">Third</div></th></tr></thead><tbody><tr><td>First</td><td>First</td><td>First</td><td>First</td></tr><tr><td>First</td><td>First</td><td>First</td><td>First</td></tr><tr><td>First</td><td>First</td><td>First</td><td>First</td></tr><tr><td>First</td><td>First</td><td>First</td><td>First</td></tr><tr><td>First</td><td>First</td><td>First</td><td>First</td></tr><tr><td>First</td><td>First</td><td>First</td><td>First</td></tr><tr><td>First</td><td>First</td><td>First</td><td>First</td></tr><tr><td>First</td><td>First</td><td>First</td><td>First</td></tr><tr><td>First</td><td>First</td><td>First</td><td>First</td></tr><tr><td>First</td><td>First</td><td>First</td><td>First</td></tr><tr><td>tesft</td><td>dddd</td><td>dd</td><td>dd</td></tr></tbody></table></div></div>

Please check this with responsive support

Solution 3:

First column or first row can easily be made by using the position: sticky css attribute.

.limited-area {
  width: 200px;
  height: 100px;
  border: 1px solid red;
  overflow-x: auto;
  white-space:nowrap;
}

.col-fixed {
  position: sticky;
  left: 0px;
  background-color: red;
}

.col-number {
  min-width: 150px;
  text-align: center;
}

.col-text {
  min-width: 250px;
  text-align: left;
}
<divclass="limited-area"><table><thead><tr><thclass="col-fixed">idx</th><thclass="col-number">id</th><thclass="col-text">type</th></tr></thead><tbody><tr><tdclass="col-fixed">0</td><tdclass="col-number">1</td><tdclass="col-text">Some content here that may force the screen to be scrollable</td></tr><tr><tdclass="col-fixed">1</td><tdclass="col-number">77</td><tdclass="col-text">Another content here that may force the screen to be scrollable</td></tr><tr><tdclass="col-fixed">2</td><tdclass="col-number">99</td><tdclass="col-text">Small content</td></tr><tr><tdclass="col-fixed">3</td><tdclass="col-number">123</td><tdclass="col-text">All the content</td></tr></tbody></table></div>

Post a Comment for "Html Table With Fixed First Column"