Fix First Column of a Bootstrap Table

by

Just add position:sticky to th & td first-child.

th:first-child, td:first-child
{
  position:sticky;
  left:0px;
  background-color:grey;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table">
  <tr>
    <th>TIME</th>
    <th>Company</th>
    <th>Company</th>
    <th>Company</th>
    <th>Company</th>
    <th>Company</th>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>11:40   </td>
    <td>Maria Anders</td>
    <td>Alfreds Futterkiste</td> 
    <td>Maria Anders</td>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>11:40   </td>
    <td>Maria Anders</td>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>11:40   </td>
    <td>Maria Anders</td>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
   <td>11:40   </td>
    <td>Maria Anders</td>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>11:40   </td>
    <td>Maria Anders</td>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>11:40   </td>
    <td>Maria Anders</td>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>

More Related Contents:

  1. "Fake hacker code" in html with css and js [closed]
  2. How do I move the + sign to the left?
  3. how to press keyboard with Jquery/ Javascript [duplicate]
  4. show links when mouse over text [closed]
  5. Change Background Color & Font Color Automatically Via CSS [closed]
  6. Wave effect around circle when clicked using CSS and HTML
  7. How can I make my header smaller if i will scroll down the webpage [closed]
  8. what practice is better using pure javascript & css is or using frameworks? [closed]
  9. Is it possible for flex items to align tightly to the items above them?
  10. Height equal to dynamic width (CSS fluid layout) [duplicate]
  11. Angular: conditional class with *ngClass
  12. Get div height with plain JavaScript
  13. Set timeout for ajax (jQuery)
  14. Select all DIV text with single mouse click
  15. Setting CSS pseudo-class rules from JavaScript
  16. Keep overflow div scrolled to bottom unless user scrolls up
  17. Accessing a CSS custom property (aka CSS variable) through JavaScript
  18. How do I get a computed style?
  19. How to add multiple classes to a ReactJS Component?
  20. Changing width property of a :before css selector using JQuery [duplicate]
  21. Dashed border animation in css3 animation
  22. How to partition input field to appear as separate input fields on screen?
  23. CSS Animation onClick
  24. CSS: Change parent on focus of child
  25. Possible to disable @media queries or force a resolution? Reason: Allow an iphone to see the desktop site?
  26. Vertical centering variable height image while maintaining max-width/height
  27. How to prevent sticky hover effects for buttons on touch devices
  28. Fade background image in and out with jQuery?
  29. Convert dropdown to selection boxes with color and trigger drop down action
  30. CSS /JS to prevent dragging of ghost image?

Leave a Comment