title: How to make the some columns fixed and some scrollable of a table?
body: <p>I am developing a web page using twitter-bootstrap 3 and some tables are not fitting my page's margins. They overflow. So I want to create a structure which works like Excel spreadsheet.</p>
  
  <p>The most left two columns (blue region) will be fixed and the remainin columns will be shown as possible. Overflowing columns will be displayed if user scrolls the table's scroll bar to right. You can see the picture how I want it to be.</p>
  
  <p><img src="https://i.stack.imgur.com/YFyNE.png" alt="enter image description here">
  Putting the table into a div and rule the div <code>overflow-x:scroll</code> is not a solution for me. Because The first two columns must be visible all the time.</p>
  
  <p>There is a solution <a href="http://zurb.com/playground/responsive-tables" rel="nofollow noreferrer">here</a> I have tried this. It works only when I shrink the window into smaller width value. </p>