Table width problem in twitter bootstrap

Question

I have an arrangement of three columns in which I have two tables related to each other in the third column:

<div class="span2">
 ..
</div>
<div class="span7">
 ..
</div>
<div class="span3">
 <h4>Betslips: </h4>
 <table class="table table-stripped table-hover table-condensed" id="RecentContests">
   <caption class="text-left">My Backs</caption> 
     <thead>
      <tr></tr>
     </thead>
     <tbody>
     <tr class ="success">
       <td>King Rama</td>
       <td>4.5</td>
       <td>1000$</td>
       <td>3500$</td>
       <td><a href="#" class="text-success">Matched</a></td>
       <td><a href="#" class="muted">X</a></td>
      </tr>
      <tr class ="success">
       <td>The Favorite</td>
       <td>1.5</td>
       <td>550$</td>
       <td>750$</td>
       <td><a href="#" class="text-success">Matched</a></td>
       <td><a href="#" class="muted">X</a></td>
      </tr>
     </tbody>
 </table>
 <table class="table table-stripped table-hover table-condensed">
   <caption class="text-left">My Lays</caption> 
    <tbody>
      <tr class ="error">
        <td>Dare Devil</td>
        <td>4.5</td>
    <td>1000$</td>
    <td>3500$</td>
        <td><a href="#" class="text-error">Pending</a></td>
        <td><a href="#" class="muted">X</a></td>
      </tr>

      <tr class ="error">
    <td>Irish Win</td>
    <td>5.5</td>
    <td>150$</td>
    <td>2500$</td>
    <td><a href="#" class="text-error">Pending</a></td>
        <td><a href="#" class="muted">X</a></td>
      </tr>
    </tbody>
  </table>

When opened in a browser, it calculates a different width for the tables, in my opinion, it should be the same, any idea why this is happening and how to prevent it? I would like the second table to be the same width as the first.

Answer 1

, , , . , CSS. .

table {width: 600px;}

table {width: 100%;}

,

table {table-layout: fixed;}

Answer 2

span3 div, , .