如果表格标题有多行并且跨度到表格单元格，则表格列大小调整不起作用答案

【问题标题】：Table column resize is not working if table header has multiple rows and colspan to table cell如果表格标题有多行并且跨度到表格单元格，则表格列大小调整不起作用
【发布时间】：2013-02-24 00:48:44
【问题描述】：

我正在使用一个小部件（我在网络上得到它）来调整表格列的大小。如果表头 <thead> 具有相同列数的行，但如果 colspan 属性设置为一行的单元格，则它工作正常。假设表格中有两行，六列。第一个单元格将有colspan=6，第二个单元格将有所有列。在这种情况下，调整大小应该适用于第二行。但它不起作用。

谁能告诉我原因？

这是我的代码：

 <!DOCTYPE>
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
  <style>

table{
    table-layout: fixed;
    border-collapse: collapse;
    border: 1px solid black;   
}
tr.last td {
    border-bottom: 1px solid black;
}

td{
    border-right: 1px solid black;
    border-bottom: 1px solid black;
    position: relative;
    white-space:nowrap;
    padding: 2px 5px;
    text-align: left;
    overflow:hidden;
}

td.last {
  border-right: none;
}

thead td div:first-child{
  text-overflow:ellipsis;
  overflow:hidden;
}
tbody td div:first-child{
  overflow:hidden;
}

.scrollContainer {
    overflow:auto;
    width:700px;
    height:auto;
    display:inline-block;
    border:1px solid red;
}
.sort1,.sort2{
 height:20px;
 border:1px solid red;
 position:absolute;
 top:0px;
}
.sort1{
 background:url('popup_trg_indicator.gif') 50% 50% no-repeat; 
 width:10px;
 right:0px;
}

.sort2{
  background:url('sort_asc.gif') 50% 50% no-repeat;
   width:12px;
   right:10px;
}
.resizeHelper,.ui-resizable-e {
    cursor: e-resize;
    width: 10px;
    height: 100%;
    top: 0;
    right: -8px;
    position: absolute;
    z-index: 100;
    background:black;
}

</style>
<div class="scrollContainer">
    <table id="MyTable" width="100%">
         <thead>

             <tr>
                <td style="width:200px;" colspan="6">
                  <span >Column 1</span> 
                  <div class="resizeHelper ui-resizable-handle ui-resizable-e"></div>
                </td>
                <!--
                <td style="width:200px;">
                  <span >Column 2</span>
                  <div class="resizeHelper ui-resizable-handle ui-resizable-e"></div>
                </td>

                <td style="width:300px;">
                  <span >Column 3</span>
                  <div class="resizeHelper ui-resizable-handle ui-resizable-e"></div>
                </td>

                <td style="width:150px;">
                  <span >Column 4</span>
                  <div class="resizeHelper ui-resizable-handle ui-resizable-e"></div>
                </td>
                <td style="width:200px;">
                  <span >Column 5</span>
                  <div class="resizeHelper ui-resizable-handle ui-resizable-e"></div>
                 </td>
                <td class="last" style="width:100px;">
                   <span >Column 6</span>
                   <div class="resizeHelper ui-resizable-handle ui-resizable-e"></div>                  
                </td>
                -->
            </tr>

            <!-- Second Row -->
               <tr>
                <td style="width:200px;">
                  <span >Column 1.1</span> 
                  <div class="resizeHelper ui-resizable-handle ui-resizable-e"></div>
                </td>
                <td style="width:200px;">
                  <span >Column 2.2</span>
                  <div class="resizeHelper ui-resizable-handle ui-resizable-e"></div>
                </td>
                <td style="width:300px;">
                  <span >Column 3.3</span>
                  <div class="resizeHelper ui-resizable-handle ui-resizable-e"></div>
                </td>

                <td style="width:150px;">
                  <span >Column 4.4</span>
                  <div class="resizeHelper ui-resizable-handle ui-resizable-e"></div>
                </td>
                <td style="width:200px;">
                  <span >Column 5.5</span>
                  <div class="resizeHelper ui-resizable-handle ui-resizable-e"></div>
                 </td>
                <td class="last" style="width:100px;">
                   <span >Column 6.</span>
                   <div class="resizeHelper ui-resizable-handle ui-resizable-e"></div>                  
                </td>
            </tr>

        </thead>
        <tbody>
            <tr><td><div>Column 1</div></td><td><div>Column 2</div></td>
                <td><div>Column 3</div></td><td><div>Column 4</div></td>
                <td><div>Column 5</div></td><td><div>Column 6</div></td>
            </tr>

            <tr class="last">
                <td><div>Column 1</div></td><td><div>Column 2</div></td>
                <td><div>Column 3</div></td><td><div>Column 4</div></td>
                <td><div>Column 5</div></td><td><div>Column 6</div></td>
            </tr>
        </tbody>
    </table>
</div>
<div>Rama Rao</div>

<script>
 /**
 * Plug-in
 * Enables resizable data table columns.
 **/
(function($) {
   $.widget("ih.resizableColumns", {
       _create: function() {
            this._initResizable();
        },

        _initResizable: function() {

            var colElement, colWidth, originalSize,colIndex;
            var table = this.element;

            this.element.find("thead td").resizable({
                handles: {"e": ".resizeHelper"},
                minWidth: -10, // default min width in case there is no label
                // set correct COL element and original size
                start:function(event, ui) {
                    colIndex = ui.helper.index() + 1;
                    colElement = table.find("thead > tr > td.ui-resizable:nth-child(" + colIndex + ")");
                    colWidth = parseInt(colElement.get(0).style.width, 10); // faster than width
                    originalSize = ui.size.width;
                },                

                // set COL width
                resize: function(event, ui) {
                    var resizeDelta = ui.size.width - originalSize;                    
                    var newColWidth = colWidth + resizeDelta;
                    colElement.width(newColWidth);  

                    // height must be set in order to prevent IE9 to set wrong height
                    $(this).css("height", "auto");
                }
            });
        }

    });
})(jQuery);
</script>

<script>
$('#MyTable').resizableColumns();
</script>

【问题讨论】：

请制作一个 jsfiddle 来展示您的问题的工作演示，使用如下分隔代码：jsfiddle.net/RLURC（不工作）
@Valky我试图把它交给 jsfiddle。但它在那里不起作用。我在我的桌面上检查了它，它工作正常。
能否提供插件的js文件的链接？然后我们可以在小提琴中测试它。
@Valky 插件/小部件中没有更多代码。它大约25行。我通过Kept评论插件包含在上面的代码中。你可以复制整个代码，保存记事本并在您的桌面上运行。它应该可以工作...
抱歉，在不分离 CSS、JS 和 HTML 的情况下让它工作是一个非常糟糕的主意。试着让它在小提琴中工作，然后，如果真的有问题，我们可以帮助你解决它。或者也许将插件更改为 datatables.net 或 quocity.com/colresizable 插件，就像一个魅力（没有 UI）。

标签： jquery html html-table resize

【解决方案1】：

如果你不使用 colspan 属性，上面的插件很棒。

colIndex = ui.helper.index() + 1;
colElement = table.find("thead > tr > td.ui-resizable:nth-child(" + colIndex + ")");

以上代码行来自您提到的插件，负责捕获所有在表格中与其上方元素共享相同列索引的元素。

为了更好地了解情况，请在脚本中的任意位置添加以下行。

$(document).ready(function() {
    $("#MyTable tr td").each(function() {
        $(this).html($(this).index());
    });
});

这将使用每个单元格的列索引填充一个表格：

像上面提到的 DataTables（我真的很喜欢）这样的其他出色的 jQuery 插件也没有针对 colspan 场景的答案。

编辑也许我给你的想法是这是不可能的。我想补充一点，您可以通过让插件知道存在跨越多列的单元格来修补此插件。话虽如此，但您必须考虑几个边缘情况。

【讨论】：