1

我有一个三列布局，其中我有两个表在第三列中背靠背连接：

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

在浏览器中打开时，它会计算表格的不同宽度，据我说应该是相同的，知道为什么会发生以及如何防止它吗？我希望第二张桌子的宽度与第一张桌子的宽度相同。

4

2 回答 2

0

它可能是 div 中的 span3 类，我见过引导程序，您可能只想自己调整表格的大小。

于 2013-05-08T12:30:35.767 回答
0

默认情况下，表格的宽度仅足以容纳其内容，因此它们具有相同宽度的可能性很小。要使它们显示相同的宽度，请考虑通过 CSS 设置宽度。例如

table {width: 600px;}

或者

table {width: 100%;}

您还可以通过添加使表格看起来更均匀和相似

table {table-layout: fixed;}
于 2013-05-07T04:51:46.557 回答