twitter bootstrap 中的表格寬度問題

Question

我有一個三列布局，其中我有兩個表在第三列中背靠背連接：

<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>

在瀏覽器中打開時，它會計算表格的不同寬度，據我說它應該是相同的，知道為什么會發生這種情況以及如何防止它？ 我希望第二個表格與第一個表格的寬度相同。

Answer 1

默認情況下，表格的寬度僅足以容納其內容，因此它們幾乎不可能具有相同的寬度。 要使它們顯示相同的寬度，請考慮通過 CSS 設置寬度。 例如

table {width: 600px;}

要么

table {width: 100%;}

您還可以通過添加使表格看起來更均勻和相似

table {table-layout: fixed;}

Answer 2

它可能是 div 中的 span3 類，我見過引導程序，您可能只想自己調整表格的大小。