Javascript 如何在显示/隐藏内部表时防止外部表调整大小_Javascript_Jquery_Html_Css

Javascript 如何在显示/隐藏内部表时防止外部表调整大小

javascript jquery html css

Javascript 如何在显示/隐藏内部表时防止外部表调整大小,javascript,jquery,html,css,Javascript,Jquery,Html,Css,在网页中，单击按钮时，隐藏的表显示在另一个表中。但是，每次切换隐藏表时，外部表的宽度都会自行调整大小。小提琴演示如下：我希望外部表的初始宽度将考虑内部表的大小。因此，不应通过显示/隐藏内部表来更改外部表的宽度正如cebirci在下面所示，固定外表的宽度并使用固定的布局是可行的。请注意，是否可以根据隐藏表确定外部表的宽度。这样，就不需要手动设置外表宽度多谢各位我还包括以下代码： <!DOCTYPE html> <html> <head> <scri

在网页中，单击按钮时，隐藏的表显示在另一个表中。但是，每次切换隐藏表时，外部表的宽度都会自行调整大小。小提琴演示如下：

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

正如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>

您应该只对表的标题行使用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>

JSFIDLE链接是

谢谢您的回复。这只是一张大桌子的一小部分。在您提供的JSFIDLE中，如果隐藏表比外部表的单元格宽，它仍然会调整外部表的大小。看见再次感谢。如果隐藏的桌子更宽，应该是什么？如果您清楚地描述您的目标或共享草图等，可能会更好。在显示或隐藏内部表格时，我希望保留外部表格的大小。初始大小将考虑内部表格的大小。我注意到问题被编辑了，这就是我想要的。谢谢，我更新了密码。两个表中都添加了一些css属性。我固定了外桌的宽度，并将其布局设置为固定。内桌的宽度设置为100%。我希望他们能解决你的问题。是的，固定了外桌的宽度。谢谢最初，我希望可以通过javascript基于内部表宽度设置外部表宽度。但这可能不值得付出努力。