Unable to round corners in a table

[paranoid-android]

Hello,

I have a table defined like this:

<div style="padding:1rem;">
  <p>
    A description of the contents of the table goes here. 
    This paragraph takes up a couple of lines of space.
  </p>
  <br />
  <table class="table-striped" >
    <thead>
      <tr>
        <th>First Name</th>
        <th>Last Name</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>Bill</td>
        <td>Jones</td>
      </tr>

      <tr>
        <td>Alex</td>
        <td>Johnson</td>
      </tr>

      <tr>
        <td>Jill</td>
        <td>Rodriguez</td>
      </tr>
    </tbody>
  </table>
</div>

The documentation shows two different table layouts:

1. A version that does not have rounded corners as shown on the home page.
2. A version that has rounded corners as shown in the "Tables" section of the components page.

The code above displays the version of a table without rounded corners. However, I want to display a table in my page that has rounded corners. As the code above shows, I have a 1rem padding. That's why I want the table border with rounded corners. Its unclear how to do this. I'm not sure if the rounded corners come from the window or the pane. If its the window, its not currently possible to nest a table with rounded corners in the middle of a page.

How can I display the table with the border and rounded corners shown in the "Tables" section of the components page?

[goodseller]

I believe you need this: http://jsfiddle.net/mzcmyec4/3/

Add the following to your script:

.component {
    border: 1px solid #BEBEBE;
    border-radius: 6px;
}

...
<div class="window-content component">
  <table>
   ...
  </table>
</div>
...

[paranoid-android]

@goodseller Thank you so much! The addition of component cleared it right up for me.