Question

请找到如下工作示例代码。此代码包含1个示例html表，其中包含1个记录。但是这个逻辑如果我尝试在我的项目中实现具有敲除绑定，它不起作用。请建议我一些选项来重新调整具有敲除绑定的表列。我尝试了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>

Answer 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>

重新调整具有敲除绑定的html表

1 个答案: