Bootstrap，我怎样才能使两个表具有相同的“宽度”答案

【问题标题】：Bootstrap, how can I make two tables the same "width"Bootstrap，我怎样才能使两个表具有相同的“宽度”
【发布时间】：2015-08-07 05:10:59
【问题描述】：

我有两张这样的桌子：

我希望它们具有相同的宽度，我不知道它叫什么，但您可以看到列的宽度不同。

这是我的代码：

    <aside>
    <table class="table table-bordered" style="margin: 0;">
        <thead>
        <tr></tr>
        <tr></tr>
        </thead>
        <tbody>
        <tr>
            <td class="tableHeader">Pilot ID</td>
            <td><?php echo 'SAS ' . $results['id'];?></td>
        </tr>
        <tr>
            <td class="tableHeader">First Name</td>
            <td><?php echo $results['firstname'];?></td>
        </tr>
        <tr>
            <td class="tableHeader">Last Name</td>
            <td><?php echo $results['lastname'];?></td>
        </tr>
        <tr>
            <td class="tableHeader">Age</td>
            <td>17</td>
        </tr>
        <tr>
            <td class="tableHeader">Distance Flown</td>
            <td>3790 km</td>
        </tr>
        <tr>
            <td class="tableHeader">Flights</td>
            <td><?php echo $results['flights'];?></td>
        </tr>
        <tr>
            <td class="tableHeader">Flight Hours</td>
            <td><?php echo $results['flighttime'];?></td>
        </tr>
        </tbody>
    </table>
    <table class="table table-bordered style="margin: 0;"">
    <thead>
    <tr></tr>
    <tr></tr>
    </thead>
    <tbody>
    <tr>
        <td class="tableHeader">737-600</td>
        <td></td>
    </tr>
    <tr>
        <td class="tableHeader">737-700</td>
        <td></td>
    </tr>
    <tr>
        <td class="tableHeader">737-800</td>
        <td></td>
    </tr>
    <tr>
        <td class="tableHeader">A319</td>
        <td></td>
    </tr>
    <tr>
        <td class="tableHeader">A320</td>
        <td></td>
    </tr>
    <tr>
        <td class="tableHeader">A321</td>
        <td></td>
    </tr>
    <tr>
        <td class="tableHeader">A330</td>
        <td></td>
    </tr>
    <tr>
        <td class="tableHeader">A340</td>
        <td></td>
    </tr>
    <tr>
        <td class="tableHeader">CRJ-900</td>
        <td></td>
    </tr>
    <tr>
        <td class="tableHeader">ATR-600</td>
        <td></td>
    </tr>
    <tr>
        <td class="tableHeader">717</td>
        <td></td>
    </tr>
    <tr>
        <td class="tableHeader">SAB 2000</td>
        <td></td>
    </tr>
    </tbody>
    </table>
</aside>

JSFIDDLE：https://jsfiddle.net/ncqmy09c/

【问题讨论】：

1) div.row // 2) div.col-xs-6*2 // 3) 你的桌子....像这样 -> jsfiddle.net/ncqmy09c/2

标签： html css twitter-bootstrap html-table

【解决方案1】：

你可以的。

.table {
    table-layout: fixed;
}

http://jsfiddle.net/vawtr0u5/

【讨论】：

【解决方案2】：

1) div.row.

2) div.col-xs-6*2.

3) 你的桌子......

像这样 -> Example jsfiddle

<div class="row">
    <div class="col-xs-6">
        <table class="table table-bordered" style="margin: 0;">
            TABLE 1
        </table>
    </div>
    <div class="col-xs-6">
        <table class="table table-bordered" style="margin: 0;">
            TABLE 2
        </table>        

    </div>
</div>

【讨论】：

【解决方案3】：

您也可以使用HTML col width Attribute

<table class="table table-bordered" style="margin: 0;">
  <col width="100">
  <col width="100">
  <thead>
      ...
  </thead>
  <tbody>
     ...
  </tbody>
</table>

小提琴：https://jsfiddle.net/ncqmy09c/1/

【讨论】：