Question

我发现了一些不寻常的东西，并且想知道这是否是故意行为以及是否有解决方法。理想情况下，我希望保持在引导程序中而不必指定特定的宽度。

我使用twitter bootstrap来格式化表格。但是，当有一个没有数据的表时，列宽与具有数据的表不同，即具有行的主体。

我已经创建了一个jsFiddle来演示这个。 jsFiddle

这是html。

<div class="col-md-10 col-md-offset-1">
    <div class="col-md-12 category-header"><span class="">Turbo</span></div>
    <div class="col-md-12 no-padding">
        <div class="table-responsive">
            <table class="table no-margin">
                <thead>
                    <tr>
                        <th class="text-left col-md-1">Part No.</th>
                        <th class="text-left col-md-3">Description</th>
                        <th class="text-center col-md-3">Notes</th>
                        <th class="text-center col-md-2">Dates</th>
                        <th class="text-center col-md-1">Stock</th>
                        <th class="text-right col-md-1">RRP</th>
                        <th class="col-md-1"></th>
                    </tr>
                </thead>
                <tbody>
                    <tr>    
                        <td class="col-md-1">ISTB10768R</td>
                        <td class="col-md-3">REMANUFACTURED TURBO</td>
                        <td title="" class="col-md-3 text-center"></td>
                        <td class="col-md-2 text-center"></td>
                        <td class="col-md-1 text-center">
                                <i title="" data-placement="top" data-toggle="tooltip" class="fa fa-check amber black-tooltip" data-original-title="Less than three units in stock"></i>

                        </td>
                        <td class="col-md-1 text-right">£370.00</td>
                        <td class="col-md-1 text-right">
                            <span data-part-number="ISTB10768R" data-part-id="564" href="#" class="glyphicon glyphicon-shopping-cart add-to-cart-btn pink  " title="Add To Cart  ">Add</span>
                        </td>
                    </tr>

                </tbody>
            </table>
        </div>
    </div>
    <div class="col-md-12 category-header"><span class="">Gear Boxes</span></div>
    <div class="col-md-12 no-padding">
        <div class="table-responsive">
            <table class="table no-margin">
                <thead>
                    <tr>
                        <th class="text-left col-md-1">Part No.</th>
                        <th class="text-left col-md-3">Description</th>
                        <th class="text-center col-md-3">Notes</th>
                        <th class="text-center col-md-2">Dates</th>
                        <th class="text-center col-md-1">Stock</th>
                        <th class="text-right col-md-1">RRP</th>
                        <th class="col-md-1"></th>
                    </tr>
                </thead>
                <tbody/>
            </table>
            <div class="missing-parts">Please call the sales team for price and availability</div>
        </div>
    </div>
</div>

Answer 1

很抱歉，您提供的代码存在问题（特别是在第二张表中），也许是一个错字。这导致了溢出。

您提供的第二个表格代码

    <table class="table no-margin">
        <thead>
            <tr>
                <th class="text-left col-md-1">Part No.</th>
                <th class="text-left col-md-3">Description</th>
                <th class="text-center col-md-3">Notes</th>
                <th class="text-center col-md-2">Dates</th>
                <th class="text-center col-md-1">Stock</th>
                <th class="text-right col-md-1">RRP</th>
                <th class="col-md-1"></th>
            </tr>
        </thead>
        <tbody/>
    </table>
    <div class="missing-parts">Please call the sales team for price and availability</div>

正如您所看到的，<tbody/>是错误的。没有起始<tbody>标记＆amp;结束标记应为</tbody>。桌面内部还有missing-parts。它在桌子外面，这就是奇怪的行为。

我在下面提供了正确的代码。这是updated Fiddle。现在工作正常。

更正了表格代码

  <table class="table no-margin">
    <thead>
        <tr>
            <th class="text-left col-md-1">Part No.</th>
            <th class="text-left col-md-3">Description</th>
            <th class="text-center col-md-3">Notes</th>
            <th class="text-center col-md-2">Dates</th>
            <th class="text-center col-md-1">Stock</th>
            <th class="text-right col-md-1">RRP</th>
            <th class="col-md-1"></th>
        </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <div class="missing-parts">Please call the sales team for price and availability</div>
        </td>
      </tr>
    </tbody>
   </table>

非常重要的一点是，即使您未在第一个<tr>下指定任意数量的数据列，它也会自动将<td>值分配给各自的<th>s 。

换句话说。如果您只提到一个<td>，它将自动成为第一个标题的数据，即。 “部件号”。这也意味着数据的宽度取其对应的标题的宽度（就像顶部表格一样）。尝试在同一个表格行中添加另一个<td>，您将理解。

具有/不具有数据的表的表列宽度不同

1 个答案: