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设置宽度。 E.g。

table {width: 600px;}

或

table {width: 100%;}

您还可以通过添加

使表格更加均匀和相似

table {table-layout: fixed;}

Answer 2

它可能是div中的span3类，我见过bootstrap，你可能想要自己调整表的大小。

twitter bootstrap中的表宽度问题

2 个答案: