Question

在网页中，单击按钮时，隐藏的表将显示在另一个表中。但是，每次切换隐藏表时，外部表的宽度都会自行调整大小。小提琴演示在这里：http://jsfiddle.net/bEK8f/5/

我希望外表的初始宽度考虑到内表的大小。因此，外表宽度不应通过显示/隐藏内表来改变。

正如cebirci在下面所示，固定外表的宽度并使用固定布局将起作用。请注意，是否可以根据隐藏表确定外部表的宽度。这样，就不需要手动设置外表宽度。

非常感谢！

我还在下面提供了我的代码：

<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function(){
    $("#show").click(function(e){
        e.preventDefault();
        $('#cat1').toggle();
    });

    $("#calculate").click(function(e){
        var diff = $('#diff').val();
        var sd = $('#sd').val();
        var effect = diff/sd;
        $('#es').val(effect.toFixed(2));
        $('#cat1').toggle();
    });
});

</script>

<style>
  table{border: 1px solid black;}
</style>
</head>
<body>

<table style="width:500px;table-layout: fixed;">
    <tr class="row2">
        <th class="col0">Effect size <button id="show">Show</button></th><td class="col1"><input type="text" id="es" value="0.1"></td>
    </tr>
    <tr class="cat1" id='cat1'  style="display:none">
        <th class="col0" id='test'></th>
        <td class="col1">
        <table>
            <tr><th class="col0 centeralign" colspan="2"> Effect size calculation </th></tr>
            <tr><td>Difference</td> <td> <input type="text" id="diff" value=".1"> </td></tr>
            <tr><td>sd</td> <td> <input type="text" id="sd" value="1"> </td></tr>
            <tr><td></td> <td> <button  id="calculate">Calculate</button> </td></tr>
        </table>        
        </td>
    </tr>   
</table>
</body>
</html>

Answer 1

您应该仅将th标记用于表格的标题行。在你的表中使用td更好，因为你没有标题等的任何标题行。在你的html中，你的新表出现在一个单元格中，并且单元格对于你的表来说很小，所以它会调整大小。您可以使用colspan合并第二行的两个单元格。

您的HTML代码可以是这样的：

<table style="width:340px;table-layout: fixed;">
    <tr class="row2">
        <td class="col0">Effect size <button id="show">Show</button></td>
        <td class="col1"><input type="text" id="es" value="0.1" /></td>
    </tr>
    <tr class="cat1" id='cat1'  style="display:none">

        <td class="col1" colspan="2">
        <div style="display:inline"><table style="width:100%">
            <tr><th class="col0 centeralign" colspan="2"> Effect size calculation </th></tr>
            <tr><td>Difference</td> <td> <input type="text" id="diff" value=".1" /> </td></tr>
            <tr><td>sd</td> <td> <input type="text" id="sd" value="1" /> </td></tr>
            <tr><td></td> <td> <button  id="calculate">Calculate</button> </td></tr>
        </table></div>      
        </td>
    </tr>   
</table>

jsfiddle链接是http://jsfiddle.net/bEK8f/2/

如何在显示/隐藏内表时保持外表不调整大小

1 个答案: