title: Issue with applying dotted border to cells in table design
body: <p>Here's my fiddle:</p>
  
  <p><a href="http://jsfiddle.net/gFA4p/84/" rel="nofollow noreferrer">http://jsfiddle.net/gFA4p/84/</a> <code></code></p>
  
  <p>In this screenshot, the green lines represent where I'm trying to apply dotted lines.</p>
  
  <p><img src="https://i.stack.imgur.com/2OCEV.png" alt="enter image description here"></p>
  
  <p>I am able to get the left-right borders to appear as dotted lines, but not the bottom borders.</p>
  
  <p>How can I resolve this?</p>