Question

我无法克服Chrome中看似简单的CSS格式问题：我想在右边放一张桌子，在同一段内放一个标签和一些左边的按钮。这在其他浏览器（Firefox，IE7和8）中很容易实现，但在Chrome中，表格会在标签下方的整个页面上展开。

HTML：

<div class="formrow">
  <label> </label>
  <div style="display: inline; width: 208px; ">
    <table id="tbl_Index" class="grid" style="display: inline; width: 208px; table-layout: fixed;">
        <thead>
            <tr class="">
                <th style="width: 50px;"></th>
                <th style="width: 150px;" class=""></th>
            </tr>
        </thead>
        <tbody>
            <tr id="1" class="">
                <td style="width: 50px;"></td>
                <td style="width: 150px;"></td>
            </tr>
            <!-- etc... -->
        </tbody>
    </table>
  </div>
</div>

事情是，我已经尝试过任何我发现的限制为200px的技巧：

我尝试分配table-layout: fixed，与width一起，应该将我的桌子限制为208px;
我尝试将表格包装在div中并将div设置为内联，以此方式限制表格
我尝试使用display: inline;设置网格样式，然后设置max-width: 208px;（您可能知道max-width仅适用于内联或块，而表格不适用于这些。）

对我来说真正令人讨厌的是，如果我进入控制台并试图获得桌子的宽度，那么告诉我208;但是当我查看表的已编译属性时，它会显示0px;

Answer 1

添加到表的样式：float:right;并且您想使用inline-block而不是inline这应该可以做到这一点

Answer 2

您可以尝试使用上面的css：

div.formrow { clear:left; }
div.formrow label { float:left; }
div.formrow tabel { width:208px; border-collapse:collapse; display:inline-block; }

表宽占页面的100％，我需要与其他元素在同一行上的表

2 个答案: