CODEWITHSUNDEEP
javascriptjqueryhtmlcsshtml-table
Daniele Cosentino
Daniele Cosentino

Reputation: 13

Dynamic td not resize when show

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>

Upvotes: 0

Views: 44

Answers (2)

KUNDAN KUMAR
KUNDAN KUMAR

Reputation: 29

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/

Upvotes: 0

kabanus
kabanus

Reputation: 25895

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>

Upvotes: 1

Related Questions