how do i make table data occupy entire table row with javascript?

Question

When the button is clicked, the table contents change their layout. i'd like to retain the table layout to be like it was before JavaScript function was executed. i am new to Javascript

 function toggle(button) { if(document.getElementById("1").value=="Show upcoming"){ document.getElementById("1").value="Show previous"; //hide previous document.getElementById("before").style.display="none"; //show upcoming document.getElementById("forward").style.display="block"; //attempt at filling whole row document.getElementById("forward").style.width="100%"; } else if(document.getElementById("1").value=="Show previous"){ document.getElementById("1").value="Show upcoming"; //show previous document.getElementById("before").style.display="block"; //attempt at filling whole row document.getElementById("before").style.width="100%"; //hide upcoming document.getElementById("forward").style.display="none"; } } 

 .table1, .table2{ width:100%; } .table2{ display:none; } 

 <input type="button" id="1" value="Show previous" onclick="toggle(this);"/> <table class="table1" cellpadding="10" cellspacing="1" border="1" id="forward" width="100%"> <tr> <td class="date"> <div class="datee" align="center">Tommorrow</div> </td> </tr> </table> <table class="table2" cellpadding="10" cellspacing="1" border="1" id="before" width="100%"> <tr> <td class="duvha" > <div class="datee" align="center">yesterday</div> </td> </tr> </table> 

Answer 1

Use display:table instead of display:block .

 function toggle(button) { if (document.getElementById("1").value == "Show upcoming") { document.getElementById("1").value = "Show previous"; //hide previous document.getElementById("before").style.display = "none"; //show upcoming document.getElementById("forward").style.display = "table"; } else if (document.getElementById("1").value == "Show previous") { document.getElementById("1").value = "Show upcoming"; //show previous document.getElementById("before").style.display = "table"; //hide upcoming document.getElementById("forward").style.display = "none"; } } 

 .table1, .table2 { width: 100 % ; } .table2 { display: none; } 

 <input type="button" id="1" value="Show previous" onclick="toggle(this);" /> <table class="table1" cellpadding="10" cellspacing="1" border="1" id="forward" width="100%"> <tr> <td class="date"> <div class="datee" align="center">Tommorrow</div> </td> </tr> </table> <table class="table2" cellpadding="10" cellspacing="1" border="1" id="before" width="100%"> <tr> <td class="duvha"> <div class="datee" align="center">yesterday</div> </td> </tr> </table> 

Answer 2

Change your javascript to below code. Table are always display:table;

 function toggle(button)
   {
     if(document.getElementById("1").value=="Show upcoming"){
     document.getElementById("1").value="Show previous";

     //hide previous
     document.getElementById("before").style.display="none";
     //show upcoming
     document.getElementById("forward").style.display="block";
     //attempt at filling whole row
     document.getElementById("forward").style.width="100%";
    }

   else if(document.getElementById("1").value=="Show previous"){
document.getElementById("1").value="Show upcoming";
  //show previous
 document.getElementById("before").style.display="block";
  //attempt at filling whole row
   document.getElementById("before").style.width="100%";
  //hide upcoming
  document.getElementById("forward").style.display="none";
    }

}