我正在使用一个小部件(我在网上找到它)来调整表格列的大小。如果表格标题 <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>

最佳答案

如果您不使用 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());
    });
});

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

其他很棒的 jQuery 插件，如上面提到的 DataTables(我非常喜欢)也没有针对 colspan 场景的答案。

编辑 也许我是想告诉你这是不可能的。 我想补充一点，您可以通过让它知道有些单元格跨越不止一列来修补这个插件。不过话虽如此，您还是必须考虑几个边缘情况。

关于jquery - 如果表格标题有多行并且 colspan 到表格单元格，则表格列大小调整不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15294611/