JGrid Prototype_javascript スキルでドラッグして列幅を変更するスクリプト

ちなみに私も勉強した列の非表示・表示方法を実装しました。ただし、この関数は css border-collapse:collapse; と競合します。 詳細については、コード 2

を参照してください。 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Jgrid をドラッグしてテーブルの幅を変更します</title> <style type="text/css"> <!-- * { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #333333; } --> </style> <div> <table id="dataTable" border="1" cellpadding="0" cellspacing="0" style="table-layout:fixed;"> <colgroup> <col style="width:200px;"> <col style="width:100px;"> <col style="width:100px;"> <col style="width:100px;"> <col style="width:100px;"> </colgroup> <tr> <td>拖动我1</td> <td>拖动我2</td> <td>拖动我3</td> <td>拖动我4</td> <td>拖动我5</td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </table> </div>
[Ctrl A すべて選択 注: 外部 Js を導入する必要がある場合は、更新して実行する必要があります

]

変更バージョン 2

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title> </title>jgrid をドラッグしてテーブル幅を変更_修正バージョン<style type="text/css"> <!-- * { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #333333; } --> </style> <div> <table id="dataTable" border="1" cellpadding="0" cellspacing="0" style="table-layout:fixed;border-collapse:collapse;"> <colgroup> <col style="width:200px;"> <col style="width:100px;"> <col style="width:100px;"> <col style="width:100px;"> <col style="width:100px;"> </colgroup> <tr> <td>拖动我1</td> <td>拖动我2</td> <td>拖动我3</td> <td>拖动我4</td> <td>拖动我5</td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </table> </div>
[Ctrl A すべて選択 注:

外部 Js を導入する必要がある場合は、更新して実行する必要があります
]

ドラッグダウン 大きな影はどのようにして生じたのでしょうか?
意図的に表示されました。 -moz-opacity:0.1;opacity: 0.1 を変更します。