テーブルの列のサイズを変更するために、ウィジェット (Web で入手したもの) を使用しています。テーブルヘッダー<thead>に同じ数の列を持つ行がある場合は正常に機能しますが、colspan属性が行のセルに設定されている場合は機能しません。6 列のテーブルに 2 つの行があるとします。最初のセルには列がcolspan=6あり、2 番目のセルにはすべての列があります。この場合、サイズ変更は 2 番目の行で機能するはずです。しかし、それは機能していません。
誰か理由を教えてくれませんか？
これが私のコードです：
<!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>