title: Customizing twitter-bootstrap table. Header floats left
body: <p>Currently I am working on table customziation for my project. I am using Twitter Bootstrap rails gem (2.2.6). However I think this should not be an issue when it comes to CSS customization.</p>
  
  <p>So basically I want to achieve the following mockup:
  <img src="https://i.stack.imgur.com/xuBwW.png" alt="enter image description here"></p>
  
  <p>However when I put radius border on  nothing happens unless I <code>float</code> it <code>left</code> or display it in block I don't see rounded borders. Please review the following jsfiddle:
  <a href="http://jsfiddle.net/zaEFz/2/" rel="nofollow noreferrer">http://jsfiddle.net/zaEFz/2/</a></p>
  
  <p>But the issue is: when floating the content left, I loose the structure of the table. That means headers don't match content anymore. So few questions:</p>
  
  <ol>
  <li><p>How to align the content with headers? If using float:left</p></li>
  <li><p>How to round the corners for each row? If not using float:left and display:block</p></li>
  </ol>
  
  <p>If you answer one of the questions that should be fine :)</p>