title: How to orderly shrink table columns
body: <p>My users will visit my web page with monitors, ranging from 11' to 15', so I hope to have my page adaptive to screen resolution.</p>
  
  <p>I have a <code>table</code> with several columns. With screen width getting smaller, the columns can shrink to <code>ellipsis</code> (the first word with 3 dots) by the order I specify.</p>
  
  <p>For example, I have a <code>table</code> of <code>Employee</code> with columns <code>id</code>, <code>name</code>, <code>department</code>, <code>title</code>, <code>manager</code> and <code>on-board date</code>.</p>
  
  <p>As the screen width gets smaller, I want column <code>on-board date</code> to the first shrink with others unchanged till <code>ellipsis</code> minimum width. Then column <code>manager</code> shrinks, then column <code>title</code> shrinks.</p>
  
  <p>Hopefully, I can achieve this without a media query.</p>