显示时动态td不调整大小

Question

In the following code clicking the checkbox un-hides a new row in the table, but the cells in that row are not sized the same as those in the first row - how do I ensure the second row has same sized cells?

 function test() { if((document.getElementById("valDesc").classList.contains("tr-withe")) && (document.getElementById("notch").classList.contains("boxNotchNot")) ) { document.getElementById("valDesc").classList.remove('tr-withe'); document.getElementById("valDesc").classList.add('boxTR'); document.getElementById("notch").classList.remove("boxNotchNot"); document.getElementById("notch").classList.add('boxNotchInLine'); } else { document.getElementById("valDesc").classList.remove('boxTR'); document.getElementById("valDesc").classList.add('tr-withe'); document.getElementById("notch").classList.remove("boxNotchInLine"); document.getElementById("notch").classList.add('boxNotchNot'); } } 

 .boxTR { display: block; border-top-style: solid; border-right-style: solid; border-left-style: solid; background-color: #E6E6E6; } .boxNotchInLine { border-right-style: solid; border-bottom-style: solid; border-left-style: solid; background-color: #E6E6E6; display: block; width: inherit; } .boxNotchNot { display: none; } table { border-spacing: 0; table-layout: fixed; width: auto; } th, td { text-align: center; } .tr-withe { background-color: #E6E6E6 } .tr-black{ background-color:#DBDBDB } 

 <form action=""> <table id="testT"> <tr id="valDesc" class="tr-withe"> <td> ciao </td> <td> <input type="text"/> </td> <td> ciao2 </td> <td> ciao3 </td> <td> ciao4 </td> </tr> <tr id="notch" class="boxNotchNot"> <td> test </td> <td > test1 </td> <td > test2 </td> <td > test3 </td> <td > test4 </td> </tr> </table> <input type="checkbox" value="" onclick="test()"/> </form> 

Answer 1

You're killing the table sizing with the block display. Comment out in your CSS display: block and it will work fine:

 function test() { if((document.getElementById("valDesc").classList.contains("tr-withe")) && (document.getElementById("notch").classList.contains("boxNotchNot")) ) { document.getElementById("valDesc").classList.remove('tr-withe'); document.getElementById("valDesc").classList.add('boxTR'); document.getElementById("notch").classList.remove("boxNotchNot"); document.getElementById("notch").classList.add('boxNotchInLine'); } else { document.getElementById("valDesc").classList.remove('boxTR'); document.getElementById("valDesc").classList.add('tr-withe'); document.getElementById("notch").classList.remove("boxNotchInLine"); document.getElementById("notch").classList.add('boxNotchNot'); } } 

 .boxTR { !display: block; border-top-style: solid; border-right-style: solid; border-left-style: solid; background-color: #E6E6E6; } .boxNotchInLine { border-right-style: solid; border-bottom-style: solid; border-left-style: solid; background-color: #E6E6E6; !display: block; width: inherit; } .boxNotchNot { display: none; } table { border-spacing: 0; table-layout: fixed; width: auto; } th, td { text-align: center; } .tr-withe { background-color: #E6E6E6 } .tr-black{ background-color:#DBDBDB } 

 <form action=""> <table id="testT"> <tr id="valDesc" class="tr-withe"> <td> ciao </td> <td> <input type="text"/> </td> <td> ciao2 </td> <td> ciao3 </td> <td> ciao4 </td> </tr> <tr id="notch" class="boxNotchNot"> <td> test </td> <td style='background-color: red;'> test1 </td> <td > test2 </td> <td > test3 </td> <td > test4 </td> </tr> </table> <input type="checkbox" value="" onclick="test()"/> </form> 

Answer 2

you should use the css:

td{
 width: 100%;
 box-sizing: border-box;
}

you can get help with this link: https://jsfiddle.net/cmedina/7kfmyw6x/20/