jqGrid 表格宽度小于 jqGrid 正文

Question

我使用 jqgrid 和 tableToGrid 插件来生成我的网页。我没有传递任何选项 tableToGrid 并且在我的表中没有任何 css 属性。我生成的表格代码是：

<div class="ui-jqgrid-bdiv" style="height: auto; width: 890px; border-left: 1px solid rgb(166, 201, 226);">
  <table cellspacing="0" cellpadding="0" border="0" class="ui-jqgrid-btable" id="elma" role="grid" aria-multiselectable="false" aria-labelledby="gbox_elma" style="width: 855px;">
    <tbody>
      <tr class="ui-widget-content jqgrow " role="row" id="1">
        <td title="Service ID" style="width: 129px;" role="gridcell">Service ID</td>
        <td title="Definition" style="width: 168px;" role="gridcell">Definition</td>
        <td title="Service" style="width: 110px;" role="gridcell">Service</td>
        <td title="Banned" style="width: 110px;" role="gridcell">Banned</td>
        <td title="Registration Date" style="width: 124px;" role="gridcell">Registration Date</td>
        <td title="Upload" style="width: 105px;" role="gridcell">Upload</td>
        <td title="Download" style="width: 109px;" role="gridcell">Download</td>
      </tr>
      <tr class="ui-widget-content jqgrow ui-priority-secondary" role="row" id="2">
        <td title="Sucuk" style="" role="gridcell">Sucuk</td>
        <td title="Yimirta" style="" role="gridcell">Yimirta</td>
        <td title="Service" style="" role="gridcell"><span style="background:#018F3D; padding: 5px; color:#ffffff;">Active</span>
        </td>
        <td title="NO" style="" role="gridcell"><span style="background:#018F3D; padding: 5px; color:#ffffff;">NO</span>
        </td>
        <td title="31-01-2014 13:05:49" style="" role="gridcell">31-01-2013 13:05:49</td>
        <td title="0 (B)" style="" role="gridcell">0 (B)</td>
        <td title="0 (B)" style="" role="gridcell">0 (B)</td>
      </tr>
      <tr class="ui-widget-content jqgrow " role="row" id="3">
        <td title="Armut" style="" role="gridcell">Armut</td>
        <td title="Kedi Bacalari" style="" role="gridcell">Kedi Bacalari</td>
        <td title="Service" style="" role="gridcell"><span style="background:#018F3D; padding: 5px; color:#ffffff;">Active</span>
        </td>
        <td title="NO" style="" role="gridcell"><span style="background:#018F3D; padding: 5px; color:#ffffff;">NO</span>
        </td>
        <td title="31-01-2014 13:05:49" style="" role="gridcell">31-01-2014 13:05:49</td>
        <td title="0 (B)" style="" role="gridcell">0 (B)</td>
        <td title="0 (B)" style="" role="gridcell">0 (B)</td>
      </tr>
    </tbody>
  </table>
</div>

截图是这样的：

如您所见，蓝色表头比内部大。当您检查生成的源代码时，您会看到 ui-jqgrid-bdiv 有 890px 但 table 有 855px。表格宽度小于平常。当我通过 Firebug 手动将 855px 更改为 890px 时，一切似乎都正常。

有什么想法吗？

Answer 1

你可以使用 jqGrid 的height: "auto" 选项：

$(function() {
    tableToGrid("#elma", { altRows: true, height: "auto" });
});

<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/redmond/jquery-ui.css"/>
<link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.7.0/css/ui.jqgrid.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.7.0/js/i18n/grid.locale-en.js"></script>
<script type="text/javascript">
    $.jgrid.no_legacy_api = true;
    $.jgrid.useJSON = true;
</script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.7.0/js/jquery.jqGrid.src.js"></script>

    <table id="elma">
      <thead><tr><th>Service ID</th><th>Definition</th><th>Service</th><th>Banned</th><th>Registration Date</th><th>Upload</th><th>Download</th></tr></thead>
      <tbody>
        <tr>
          <td>Sucuk</td>
          <td>Yimirta</td>
          <td><span style="background:#018F3D; padding: 5px; color:#ffffff;">Active</span></td>
          <td><span style="background:#018F3D; padding: 5px; color:#ffffff;">NO</span></td>
          <td>31-01-2013 13:05:49</td>
          <td>0 (B)</td>
          <td>0 (B)</td>
        </tr>
        <tr>
          <td>Armut</td>
          <td>Kedi Bacalari</td>
          <td><span style="background:#018F3D; padding: 5px; color:#ffffff;">Active</span></td>
          <td><span style="background:#018F3D; padding: 5px; color:#ffffff;">NO</span></td>
          <td>31-01-2014 13:05:49</td>
          <td>0 (B)</td>
          <td>0 (B)</td>
        </tr>
      </tbody>
    </table>