Javascript <；t车身>；元素填充到表的第一列中_Javascript_Html_Css

Javascript <；t车身>；元素填充到表的第一列中

javascript html css

Javascript <；t车身>；元素填充到表的第一列中,javascript,html,css,Javascript,Html,Css,我试图通过选中复选框来隐藏/显示表行给你如何使隐藏行以表格的宽度正确显示？我甚至尝试将它设置为该行的css属性，但它不起作用代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>The Case of the Squished Row</title> <style> table {

我试图通过选中复选框来隐藏/显示表行

给你

如何使隐藏行以表格的宽度正确显示？我甚至尝试将它设置为该行的css属性，但它不起作用

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>The Case of the Squished Row</title>
<style>
table {
    border: 1px solid black;
     width: 600px;
    }
tr {border:1px solid black;}
tr.anote {width:600px;}
th {
    border:1px solid black;
    width:50%;
    }
td {
    border: 1px solid black;
    width: 25%;
    }

</style>

<script type="text/javascript">
    function ShowRow(msg){
        var thecheck = document.getElementById("showcheck");
        var thebox= document.getElementById("showbox");
        var thenote= document.getElementById("shownote");
        if (thecheck.checked){
            thebox.innerHTML=msg;
            thebox.style.color='red';
            thenote.style.display='block';
            }
        else {
            thebox.innerHTML='This is a checkbox';
            thebox.style.color='black';
            thenote.style.display='none';
            }

        }
</script>
</head>
<body>
<h1>The Case of the Squished Row</h1>
<br><br>
<h2> using display:none CSS property</h2>
<table>
<tbody id="topline">
<tr><th id="showbox">This is a checkbox</th>
<td><input type="checkbox" id="showcheck" onclick="ShowRow('Note is DISPLAY:BLOCK')"></td>
<td>this is filler</td></tr>
</tbody>
<tbody id="shownote" style="display:none">
<tr class="anote"><th>This is a note</th><td>Hey! The box is checked!</td><td>this is filler</td></tr>
</tbody>
<tbody id="botline">
<tr><th>Big Filler</th><td>Little filler</td><td>this is filler</td></tr>
</tbody>
</table>
</body>
</html>


被压扁的一排的情况
桌子{
边框：1px纯黑；
宽度：600px；
}
tr{边框：1px纯黑色；}
tr.anote{宽度：600px；}
th{
边框：1px纯黑；
宽度：50%；
}
运输署{
边框：1px纯黑；
宽度：25%；
}
函数ShowRow（msg）{
var thecheck=document.getElementById（“showcheck”）；
var thebox=document.getElementById（“showbox”）；
var thenote=document.getElementById（“shownote”）；
如果（检查已选中）{
thebox.innerHTML=msg；
thebox.style.color='red'；
note.style.display='block'；
}
否则{
thebox.innerHTML='这是一个复选框'；
thebox.style.color='black'；
note.style.display='none'；
}
}
被压扁的一排的情况



使用display:none CSS属性
这是一个复选框
这是填料
这是一张便条嘿！盒子被选中了！这是填料
大填料小填料这是填料

在显示表格行组（即

）时，必须使用“表格行组”，而不是“块”作为“显示”属性的值。

在显示表格行组（即

）时，必须使用“表格行组”，而不是“块”作为“显示”属性的值。

在旧版本的Internet Explorer中，祝你好运我没有运行浏览器来尝试它。IE8和更高版本应该理解

显示：表行组

，但是如果在JS中设置显示样式，旧版本可能能够自行确定如果您将其设置为空字符串而不是显式值，该怎么办。在旧版本的Internet Explorer中，祝您好运。我没有运行浏览器来尝试它。IE8和更高版本应该理解

display:table row group

，但是如果在JS中设置显示样式，旧版本可能能够自行确定如果将其设置为空字符串而不是显式值，该怎么办。