table width issue in twitter bootstrap

问题

I have a three column layout, in which I have two tables connected back to back 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 browser it computes different widths for the tables, according to me it should be the same, any idea why is it happening and how to prevent it? I would like the second table to be the same width as of the first one.

回答1:

By default, the tables will only be wide enough to accommodate their content, so there's little chance of them being the same width. To make them display the same width, consider setting a width via CSS. E.g.

table {width: 600px;}

or

table {width: 100%;}

You can also make the tables look more even and alike by adding

table {table-layout: fixed;}

回答2:

It could be the span3 class in on the div, I've seen bootstrap, you might want to just size the table yourself.

来源：https://stackoverflow.com/questions/16411351/table-width-issue-in-twitter-bootstrap