顯示時動態td不調整大小

Question

在下面的代碼中，單擊復選框取消隱藏表中的新行，但是該行中的單元格大小與第一行中的單元格大小不同-如何確保第二行中的單元格大小相同？

 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

您正在用block顯示取消表格大小。 在CSS display: block注釋掉，它將正常工作：

 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

您應該使用CSS：

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

您可以通過以下鏈接獲得幫助： https : //jsfiddle.net/cmedina/7kfmyw6x/20/