I have multiple tables. I want text alignment of first to be on left, rest that follow to be centered. Not sure what I'm missing. Any help appreciated.

My html:

Code:
<table class="fullprice">
  <caption>
    Session Rates
  </caption>
  <colgroup>
  <col id="length">
  <col id="rate">
  </colgroup>
  
  <tr>
    <th scope="col">Length</th>
    <th scope="col">Rate</th>
  </tr>
  <tr>
    <td><sup>1</sup>/<sub>2</sub> hour</td>
    <td>$40</td>
  </tr>
  <tr>
    <td>1 hour</td>
    <td>$70</td>
  </tr>
  <tr>
    <td>1 <sup>1</sup>/<sub>2</sub> hour</td>
    <td>$105</td>
  </tr>
  <tr>
    <td>2 hour</td>
    <td>$130</td>
  </tr>
  <tr>
  	<td>1 <sup>1</sup>/<sub>4</sub> hour Hot Stones</td>
    <td>$90</td>
</table>
<table class="packages">
	<caption>
		1 hour packages
    </caption>
    <colgroup>
    <col id= "quantity">
    <col id= "rate">
    <col id= "no_discount">
    <col id="save">
    <col id= "each">
    </colgroup>
    
    <tr>
    	<th scope= "col">Quantity</th>
        <th scope= "col">Rate</th>
        <th scope= "col">Without Discount</th>
        <th scope= "col">Saves</th>
        <th scope="col">Cost Each</th>
    </tr>
    <tr>
    	<td>3</td>
        <td>$180</td>
        <td>$210</td>
        <td>$30</td>
        <td>$60</td>
    </tr>
    <tr>
    	<td>5</td>
        <td>$275</td>
        <td>$350</td>
        <td>$75</td>
        <td>$55</td>
    </tr>
        <tr>
    	<td>10</td>
        <td>$520</td>
        <td>$700</td>
        <td>$180</td>
        <td>$52</td>
    </tr>    
    </table>
And CSS:

Code:
table {
	width:65%;
	margin: 0 auto;
	padding-top: 5em;
	border-collapse: collapse;
	margin-top: 5em;
}


th {
	padding: .6em 1em .3em;
	text-align: center;
	border-bottom: 1px solid black;
}
th, td {
	vertical-align: middle;	
}
td {
	padding: .4em 1em;
	border-bottom: 1px solid #900;
}
tr:hover {
	color: #005BAA;
}
table.fullprice {
	width: 35%;
}
td.fullprice {
	text-align: left;
}
td.packages {
	text-align: center;
}
What am I missing??