单击“展开”按钮后如何设置固定表的大小
[英]How do I set fixed table's size after clicking 'expand' button
问题描述
I have a table which is hidden by default and can only be seen after clicking "expand" button. 
我有一个默认情况下是隐藏的表，仅在单击“展开”按钮后才能看到。 The problem is when I click the button, the whole tr where this button is located messes up. 问题是当我单击该按钮时，此按钮所在的整个tr混乱了。 Here's what I mean 这就是我的意思
$(document).ready(function() { $('.partTableContent').hide(); $('.expandButton').click(function() { // .parent() selects the A tag, .next() selects the P tag $(this).closest('tr').next(' tr').find('div.partTableContent').slideToggle(750); }); });
<style>.partsTable { border-collapse: collapse; } .sideForPartsTable { border: 3px solid #05788D; } </style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <body> <div class="partTableDiv"> <table class="partsTable" style="width: 100%; height: 30vh"> <tr> <td class="sideForPartsTable" width="5%"><button class="expandButton">Expand button</button></td> <td class="sideForPartsTable">Title</td> <td class="sideForPartsTable" width="5%"><button class="editButton">edit</button></td> <td class="sideForPartsTable" width="5%"><button class="removeButton">remove</button></td> </tr> <tr> <td colspan="4"> <div class="partTableContent"> <table style="width: 100%"> <tr> <td> table's tr </td> </tr> <tr> <td> table's tr </td> </tr> <tr> <td> table's tr </td> </tr> <tr> <td> table's tr </td> </tr> <tr> <td> table's tr </td> </tr> <tr> <td> table's tr </td> </tr> <tr> <td> table's tr </td> </tr> <tr> <td> table's tr </td> </tr> <tr> <td> table's tr </td> </tr> <tr> <td> table's tr </td> </tr> </table> </div> </body>
See? 看到？ When I click expand button, the whole tr's (where this button is located) height shrinks. 当我单击扩展按钮时，整个tr's （此按钮所在的位置）的高度会缩小。 Especially noticeable when click "Full page". 当单击“整页”时尤其明显。 How can I avoid it and make it the height static? 如何避免它并使它的高度固定？
1 个解决方案
解决方案1
0 已采纳 2018-01-11 11:35:00
plz give a height for the first tr say height: 50px; plz给出第一个tr的高度，比如说height：50px;
<table class="partsTable" style="width: 100%;">
<tr style="height: 30vh">
<td class="sideForPartsTable" width="5%"><button class="expandButton">Expand button</button></td>
<td class="sideForPartsTable">Title</td>
<td class="sideForPartsTable" width="5%"><button class="editButton">edit</button></td>
<td class="sideForPartsTable" width="5%"><button class="removeButton">remove</button></td>
</tr>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.