title: How to create a table inner bevel in HTML/CSS?
body: <p>I'm designing this forum layout where I come up with a nice design to draw the forum tables, however, I'm not sure that this can be easily done in HTML/CSS.</p>
  
  <p>Before I continue to draw the whole layout, I need to know if this is achievable and how, otherwise, I'll have to ditch this effect and rethink things...</p>
  
  <p>For instance, the design I currently have is this one:</p>
  
  <p><a href="https://i.stack.imgur.com/ohI1K.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ohI1K.png" alt="Sample Table"></a>
  </p>
  
  <p>The rows on this example have all the same height but this is just an example. The real table will actually have different row heights and the code needs to take that into account...</p>
  
  <p>How can this be done?</p>