重新调整具有淘汰赛绑定的 html 表的大小答案

【问题标题】：Re-sizing of html table having knockout binding重新调整具有淘汰赛绑定的 html 表的大小
【发布时间】：2014-01-07 07:07:38
【问题描述】：

请找到下面的工作示例代码。此代码包含 1 个具有 1 条记录的示例 html 表。但是，如果我尝试在具有淘汰赛绑定的项目中实现此逻辑，则它不起作用。请建议我一些选项来重新调整具有淘汰赛绑定的表列的大小。我尝试了 jQuery 插件，但它不适用于淘汰绑定。
colResizable 演示

  <link rel="stylesheet" type="text/css" href="css/main.css" />  
  <script  src="js/jquery-1.9.0.min.js"></script>
  <script  src="js/colResizable.js"></script>
  <script type="text/javascript">
    $(function(){   

        $("#examTable").children().colResizable();      
    }); 
  </script>

</head>
<body>
    <div  id="patientInfo">
        <div id="examTable" style="width: 100%;">   
            <table cellspacing="0" id="WLcolumn-header-table" style="width: 100%;">     
                <thead>       
                    <tr  id="WLheaderRow">
                        <th  w="1.3" style="width: 5.2%;" ><a class="select"></a></th>
                        <th  w="6"  style="width: 22%;">Student Name <img class='' ></th>
                        <th  w="3"  style="width: 12%;">Student ID <img class='' ></th>
                        <th  w="2"  style="width: 8%;">Date <img class='image-arrow-up' ></th>
                        <th  w="3"  style="width: 12%;">ABC # <img class='' ></th>
                        <th  w="4"  style="width: 14%;">Description <img class='' > </th>
                        <th  w="2"  style="width: 10%;">Teacher <img class='' ></th>
                        <th  w="2"  style="width: 8%;">Class <img class='' ></th>
                        <th  w="2"  style="width: 10%;">Status <img class='' ></th>
                    </tr>     
                </thead>    
                <tbody >
                    <tr   >
                        <td id="check_selected"      style="width: 5.2%;">
                            <a >1</a> 
                        </td>
                        <td  style="width: 22%;" >xyz</td>
                        <td  style="width: 12%;" >zyz111</td>
                        <td  style="width: 8%;"  >12-12-1912</td>
                        <td  style="width: 12%;" >Acc121</td>
                        <td  style="width: 14%;" >HELLO</td>
                        <td  style="width: 10%;"  >me</td>
                        <td  style="width: 8%;"  >ECE</td>
                        <td  style="width: 10%;"  >ACTIVE</td>
                    </tr>

                </tbody>
            </table>                                    
        </div>              
    </div>

        <br/>

        <div class="sampleText">
            <label id="sample2Txt">Drag the columns to start</label>                
        </div>

        <br/><br/>

    </div>      
 </body>
 </html>

【问题讨论】：

在此处发布您的代码部分。你尝试过什么
@AmarnathBalasubramanian 。请在我编辑的帖子中找到代码。这是没有敲除绑定的示例工作代码。由于我的项目具有广泛的敲除绑定，它在那里不工作

标签： html knockout-2.0

【解决方案1】：

将max-height 赋予另一个元素中的单元格内容you'll need to wrap it（例如div）。此外，我建议使用style 绑定，如下所示：

        <td>
        <div data-bind="text: rowInfo[colInfo.DataColumn],
            style: { width: Width, height: '30px' }"></div>
        </td>

请参阅this fiddle 以获得工作演示。

或者你可以试试这个

<table>
<tr>
  <td><div style="height:40px; overflow:hidden">Sample</div></td>
  <td><div style="height:40px; overflow:hidden">Text</div></td>
  <td><div style="height:40px; overflow:hidden">Here</div></td>
</tr>
</table>

【讨论】：

Balasubranaiam : 我的要求是我应该能够像在 Excel 表中一样拖动列。