Rounded corners inherited to nested table

[amenhotep]

Ok I will start by saying that I am very new to css, but trying to learn. I have a css for my site, and I have two different types of tables one that has rounded corners and one that does not. in the html, I have a table without rounded corners inside the table with rounded corners. The table inside that should not have rounded corners seems to inherit the rounded corners. Any suggestions on how to correct this? A Link to the actual page is http://admin-gicaa.jkeenterprises.com/css-test.php

CSS style sheet code

table.rounded-corners 	{	border-radius: 13px;	}table.rounded-corners tr:first-child td:first-child {	border-top-left-radius: 13px;	bgcolor: white;	padding:3px 7px 2px 7px;}table.rounded-corners tr:first-child td:last-child {	border-top-right-radius: 13px;	bgcolor: white;	padding:3px 7px 2px 7px;	}table.rounded-corners tr:last-child td:first-child {	border-bottom-left-radius: 13px;	bgcolor: white;	padding:3px 7px 2px 7px;}table.rounded-corners tr:last-child td:last-child {	border-bottom-right-radius: 13px;	bgcolor: white;	padding:3px 7px 2px 7px;} table.data {	border-radius: 1px;	font-family: 'Play', sans-serif; 	width:90%;	border-collapse:collapse;}table.data td, th {	border-radius: 1px;	font-size:1em;	border:3px solid #ffffff;	padding:3px 7px 2px 7px;	background-color:#ccc;	border-radius: 1px;} table.data tr.alt td {	border-radius: 1px;	color:#000000;	background-color:#EAF2D3;}

<tr>    <td>6</td>    <td>7</td>    <td>8</td>    <td>9</td>    <td>10</td>  </tr>  <tr>    <td>11</td>    <td>12</td>    <td>13</td>    <td>14</td>    <td>15</td>  </tr>  <tr>    <td>16</td>    <td>17</td>    <td>18</td>    <td>19</td>    <td>20</td>  </tr></table> <table class="rounded-corners">  <tr>    <td><table class="data">  <tr>    <td>1</td>    <td>2</td>    <td>3</td>    <td>4</td>    <td>5</td>  </tr>  <tr>    <td>6</td>    <td>7</td>    <td>8</td>    <td>9</td>    <td>10</td>  </tr>  <tr>    <td>11</td>    <td>12</td>    <td>13</td>    <td>14</td>    <td>15</td>  </tr>  <tr>    <td>16</td>    <td>17</td>    <td>18</td>    <td>19</td>    <td>20</td>  </tr></table></td>  </tr></table><p> </p><p> </p>

[davej]

Uh, you put a table inside a table and then start selecting first and last child. I'm still trying to figure out if that makes sense. If all you want to do is round the corners of the border of the outer table then there is no need for this fancy first-child, last-child nonsense, but you can't see a rounded border unless you turn on a border.

table.rounded-corners {        border: 1px solid black;	border-radius: 13px;	}

Edited July 6, 2013 by davej